React项目build

1.项目根目录下新建app.js文件

// 使用 express 搭建一个服务器

const express = require("express");

const { createProxyMiddleware } = require("http-proxy-middleware");

const app = express();

app.use(

  "/api",

  createProxyMiddleware({

    target: "https://www.ahsj.link/rambo",

    changeOrigin: true,

    pathRewrite: (path) => path.replace("/api", ""),

  })

);

app.use(express.static("build"));

app.listen(8080);

// 将来打包可能会有这几种情况：

// 1. 打包好后，直接给后端，让后端进行静态托管

//      我们发现直接打包放到后端，会导致请求可能会 404 ，原因是没有走代理

//      我们在前端进行开发的时候，代理是 webpack 帮我们进行的，当打包后，是没有这个代理的

// 1.1 如果接口服务器就是静态资源服务器，只需要把 '/api' 删除，请求会自动请求相同域名下的接口

// 1.2 如果接口服务器不是静态资源服务器，需要把 '/api' 修改为真正请求的地址，重新打包,但是这个时候一定会跨域

//       需要让后端做对应的配置转发  -- 至于怎么做，不用管  -- 其实说白了，也只是在静态资源服务器进行 一次代理

2.也可以通过process.env知道当前是什么环境

import axios from "axios";

const instance = axios.create({

  baseURL: "/api",

  // 可以判断一下，如果是生产环境，使用一个对应的 url，如果是开发环境，使用另一个url

  baseURL:

    process.env.NODE_ENV === "development"

      ? "/api"

      : "https://www.ahsj.link/rambo", // 但是具体写什么，需要大家息根据实际情况确定

  timeout: 5000,

});

React项目build的相关教程结束。