vue2中配置环境变量的方法

首先要创键三个文件，分别为.env.development（开发环境）   .env.production（生产环境） .env.test（测试环境），跟package.json目录是同级文件。

.env.development文件代码

# 开发环境
NODE_ENV = development
VUE_APP_MODE = development
VUE_APP_BASE_URL = https://*****/index.php/

.env.production文件代码

# 生产环境
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = 'https://******/index.php/'

.env.test文件代码

# 测试环境
NODE_ENV = test
VUE_APP_MODE = test
VUE_APP_BASE_URL = http://49.94.4.21/

需要在package.json配置 --mode NODE_ENV起的名字

"scripts": {
  "serve": "vue-cli-service serve --mode development",
  "serve:dev": "vue-cli-service serve --mode development",
  "build": "vue-cli-service build --mode production",
  "lint": "vue-cli-service lint",
  "test": "vue-cli-service serve --mode test"
},

注意！！！在文件中配置环境路径，前面必须以VUE_APP开头！！！

然后在main.js或者vue.config.js中打印一下process.env.VUE_APP_BASE_URL，如果获取到就证明成功了

使用build打包时注意事项 

需要在vue.config.js文件中配置

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./",
  outputDir: "dist",
  assetsDir:"static",
})

配置完后在dist目录中查看

 可以直接打开index.html查看页面