env-cross npm常用修改变量模块

前提： cross-env是跨平台设置和使用环境变量的脚本。

使用 cross-env 可以设置在不同的平台上有相同的NODE_ENV参数。

安装：

npm install --save-dev cross-env

使用（vue3项目中的package.json文件）

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "mockServe": "cross-env NODE_ENV=mock vue-cli-service serve"
  }
}

然后通过 npm run mockServe运行的时候就会修改全局的变量NODE_ENV；

我的应用场景分析

vue.config.js

let apiString = process.env.NODE_ENV === 'mock' ? "/api/data-collect" : "/api";
let proxyString = process.env.NODE_ENV === 'mock' ? "https://mock.apifox.cn/m1/xxx" : "http://192.168.xx.xx:xxx/";
module.exports = {
  devServer: {
    proxy: {
      [apiString]: {
        target: proxyString, //接口地址
        ws: false, //如果要代理 websockets，配置这个参数
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
         [`^${apiString}`]: "",
        }
      }
    }
  }
}

当使用ApiFox来mock数据的时候就可以运用npm run mockServe来通过apiFox的接口来访问数据了。案例中的xx为保护项目实际数据， 请勿直接粘贴使用， 请根据自己的项目服务器地址和接口情况适当修改。