vue配置多环境

学习链接

.env.development（开发环境）、.env.prodction（正式环境）、自定义环境的使用

vue环境变量配置——process.env（详细）

vue中 .env .env.development .env.production 详细说明

步骤

.env.dev

NODE_ENV = 'devV'
VUE_APP_TITLE = 'devv'

# 必须是NODE_ENV、BASE_URL、或以VUE_APP_开头
# 这样配置会不起作用
a = b

.env.prod

NODE_ENV = 'prodD'
VUE_APP_TITLE = 'prodd'

package.json

使用--mode 指定模式，然后使用npm run server启动开发环境，使用npm run prod启动生产环境环境。注意：打包那里也要添加--mode=prod

  "scripts": {
    "serve": "vue-cli-service serve --mode=dev",
    "serve:prod": "vue-cli-service serve --mode=prod",
    "build": "vue-cli-service build --mode=prod"
  }

main.js

可以打印出来看看

...
console.log(process.env.VUE_APP_TITLE);
console.log(process.env);
...

以npm run server启动开发环境，打印如下