全局变量

可以通过配置全局变量，全局配置请求域名以区分开发环境、测试环境、编译环境等等
通过.env配置环境变量区分开发和生产环境

全局变量初始化：VUE_APP_开头
全局变量使用：process.env.xxx

1.vue项目中根目录 新建.env.dev 【dev可以根据需要自定义，如development】

image.png

2..env.development 文件内

NODE_ENV = dev

# just a flag
ENV = 'dev'

# base api
VUE_APP_BASE_API = 'https://xxx.xxx.com'

2.package 文件内

image.png

3.编译
编译命令：npm run build:dev 可以编译这个域名的文件

4.获取变量
或者可以通过process.env.dev 可以获取到 https://xxx.xxx.com

实战中应用：vue配置多编译环境以及打包文件名

image.png

1、新建文件.env.xxx，里面内容如下

NODE_ENV = production // 这个是开发环境 这个变量好像是不能改

VUE_APP_BUIld_ENV = 'yxy' //这个是自定义变量，变量只要是VUE_APP开头的即可

ENV = 'yxy' //  这个env必须和package.json中的配置一致 build:yxy": "vue-cli-service build --mode yxy

# base api
VUE_APP_BASE_API = 'https://yxy.test.com/'

可以通过process.env打印出这个变量

2、在package.json中配置

image.png

3、修改编译生成的文件名

module.exports = {
  publicPath: './',
  outputDir: `dist_${process.env.VUE_APP_BUILD_ENV}`,
}

4、运行打包命令

npm run build:yxy

生成的文件名为 dist_yxy