vue-cli3 配置环境变量

vue-cli3 搭建的项目其实看起来比 cli2 简单明了很多，官方也有相关文档对多环境变量配置的描述。
https://cli.vuejs.org/zh/guide/mode-and-env.html

1、首先明确：
通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
通过传递 --mode 选项参数为命令行覆写默认的模式

2、创建文件：(一定是根目录！！！！！！！！！！！！！！！！！！！！！！！！！！)

在项目的根目录新建4个文件夹，分别对应开发（dev），测试（test），仿真（uat），生产（prod）
文件命名： .env.dev , .env.test , .env.uat , .env.prod

3、配置每个文件的环境

.env.dev

NODE_ENV='development'
VUE_APP_CURRENTMODE='dev'
VUE_APP_BASEURL='你的开发环境地址'

.env.test

NODE_ENV='production'
VUE_APP_CURRENTMODE='test'
VUE_APP_BASEURL='你的测试环境地址'

.env.uat

NODE_ENV='production'
VUE_APP_CURRENTMODE='uat'
VUE_APP_BASEURL='你的仿真环境地址'

.env.prod

NODE_ENV='production'
VUE_APP_CURRENTMODE='prod'
VUE_APP_BASEURL='你的线上环境地址'

4、配置package.json

"version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build--test": "vue-cli-service build --mode test",
    "build--uat": "vue-cli-service build --mode uat",
    "build--prod": "vue-cli-service build --mode prod",
    "build": "vue-cli-service build"
  },

npm run dev		//本地运行
npm run build:test      //测试环境打包
npm run build:uat      //仿真环境打包
npm run build:prod 		//正式环境打包

来源：oschina

链接：https://my.oschina.net/parchments/blog/3175994

标签

Vue CLI

vue-cli3 配置 环境变量

vue-cli3 配置环境变量