vue配置不同环境的变量

一、vue2 + webpack

方式一、按照cross-env依赖

npm i cross-env

package.json文件

"scripts": {
    "serve": "cross-env VUE_APP_BASE_API=/web  VUE_APP_THREE=/threejs/index.html VUE_APP_WEBSOCKET=116.63.136.74:8888 vue-cli-service serve",
    "build": "cross-env VUE_APP_BASE_API=/api/BsServer/web VUE_APP_THREE=/shifang_web/threejs/index.html VUE_APP_WEBSOCKET=/api/BsServer/web vue-cli-service build",
    "build-sf": "cross-env VUE_APP_BASE_API=/api/BsServer/web VUE_APP_THREE=/shifang_web/threejs/index.html VUE_APP_WEBSOCKET=/api/BsServer/web vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

获取值，这里需要注意，变量名必须是VUE_APP开头，vue-cli内部配置了，只有这个变量名开头才能直接获取到

process.env.VUE_APP_BASE_API

方式二、.env.xxx配置文件
.env文件是公共的环境配置文件，所有环境都能用，一些公共配置就可以写在这里

NODE_ENV = production
VUE_APP__NAME=生产环境
VUE_APP__API= http://12.54.24.125:8989

.env.xxx 某个环境可用 比如命名为 .env.test .env.lth,然后打包命令添加 --mode test --mode lth来读取指定的.env.xxx文件

"build-test": "vue-cli-service build --mode test"
"build-lth" : "vue-cli-service build --mode lth"

vue3+vite

同理，只是变量命令改成VITE开头