vue打包时配置不同的环境变量(vue-cli4)

vue打包时配置不同的环境变量(vue-cli4)

以配置测试环境test为例

1、在package.json文件中配置script文件

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-testenv": "vue-cli-service build --mode testenv"
  },

2、创建文件

根据配置文档中模式和环境变量中显示

在根目录中创建文件.env.[mode] # 只在指定的模式中被载入

只有以 `VUE_APP_` 开头的变量会被 `webpack.DefinePlugin` 静态嵌入到客户端侧的包中

故而我们要在跟目录中创建一个 .env.testenv文件，内容如下

VUE_APP_MODE='test'  //这个是自定义变量
NODE_ENV='production' //这个是设置mode,此处mode为websocket中的mode

在APP.vue的created钩子中写下如下代码

console.log(process.env);

3、运行

完成上述设置后运行并打包输出

输入命令npm run build-testenv

此时控制台输出如下

BASE_URL: ""
NODE_ENV: "production"
VUE_APP_MODE: "test"

4、使用

在项目中将需要使用到这个变量的地方写上process.env.VUE_APP_MODE,即可在项目打包后于对应位置写上该字段