react v18——env环境变量配置、打包配置（craco）

Unique·Blue2024-07-07 12:46

一、env文件

像其他项目一样，在根目录新建 .env 文件，如 .env.development

env 复制代码

REACT_APP_ENV=development
REACT_APP_API_BASE_URL=http://192.168.2.107:31000

REACT_APP_API_BASE_URL 可以用在 axios 封装的位置，作为 baseURL

js 复制代码

const instance = axios.create({
baseURL: process.env.REACT_APP_API_BASE_URL,
  timeout: 30000,
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false,
});

这种直接使用 全链接请求 的方式，需要 后端 配合解决下 跨域 问题。

二、代理配置

如果想要用代理，可以在 craco.config.js 中配置：

（在使用less篇，有 craco的安装使用步骤）

js 复制代码

// 跨域配置
  devServer: {
    proxy: {
      "/api": {
        target: "http://192.168.2.107:31000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },

这时候 axios 的 baseUrl 就不用全链接了，比如：

js 复制代码

const instance = axios.create({
  baseURL: "/api",
  timeout: 30000,
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false,
});

三、package.json 打包配置

安装 cross-env：yarn add cross-env
修改scripts，即可使用对应命令打包

json 复制代码

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "build:dev": "cross-env REACT_APP_ENV=development craco build",
    "build:test": "cross-env REACT_APP_ENV=test craco build",
    "build:prod": "cross-env REACT_APP_ENV=production craco build"
  },