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

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

以配置测试环境test为例

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

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

二、建立文件

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

在根目录中建立文件.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);

三、运行

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

输入命令npm run  build-testenv

此时控制台输出以下

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

四、使用

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