vue3.0 多环境配置
最常见的多环境配置，就是开发环境配置,和生产环境配置(也就是上线的配置)，很多情况下我们开发环境下的域名，和一些配置项,和我们生产模式下的不同，这个时候就需要我们进行多环境配置，不然每次发版都要改一波数据多麻烦。另一种情况就是你两个项目是用的一套代码，但是最后又要分别打成不同的包，那么这个时候多环境配置就大大提升了开发效率。
配置文件创建位置
.env 文件创建在 vue 项目的根目录下，和 package.json同级 ，如下图所示：
.env 文件配置
.env 文件的命名方式
网上大部分都说是命名为： .env.dev/ .env.prod/ .env.test
但 .env 格式的命名并不局限于这三种，他的命名方式可以多种多样，只需要文件开头为.env ，后面的名字你想怎样都可以。
特殊的命名方式：
- .env.pord 打包 vue 会压缩代码，另外两种命名方式在 vue 中没有做特殊处理。
- .env 默认 vue 配置文件
- .env.***.local git 会忽略
.env文件的配置
可以在文件里填写任何想要的东西，如想在项目全局都能获取到名字，便可直接在 .env 里配置。默认的调试，打包命令都直接调用 .env 文件里的配置。
.env 文件配置：
//以 VUE_APP_*** 的形式命名，后面大写还是小写都可以
NODE_ENV=production
VUE_APP_SERVER=http://127.0.0.1:8080
VUE_APP_NAME = "飞云"
VUE_APP_ABBREVIATION = "fy"
VUE_APP_LOGO = "fy"
默认的调试，打包命令都会调用 .env 格式
npm run build
npm run serve
当配置文件 NODE_ENV=development 时, build 的 dist 文件为 vue 创建项目时的初始页面，原因可能是因为前端开始时不用打包，只有发布到测试环境和生产环境时需要打包。
配置运行环境
在 vue 项目 src 目录下的 main.js 文件引入的 axios 命令下方，直接定义 axios 的 baseURL，即可在其他页面中完成域名的切换。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"serve:linux": "vue-cli-service serve --mode linux",
"build:linux": "vue-cli-service build --mode linux",
"serve:local": "vue-cli-service serve --mode local",
"build:local": "vue-cli-service build --mode local"
},
build: 和 serve: 后面的名字要与 .env 后面接的名字对应 ，这在运行的时候才能找到相应的配置项。
.env是默认配置项，当运行环境配置项的时候，会将默认配置项和运行的环境配置项融合，在参数相同的情况下，会以环境配置项为主，简单来说就是，默认配置项存在，环境配置项也存在，这个时候运行哪个环境配置项，就以哪个环境配置项的值为准，如果默认配置项存在，环境配置项不存在，那么运行环境配置项的时候同样也可以拿到默认配置项的值。
运行指定的环境
根据 package.json 中填写的 key 来确认运行指定环境的命令。如 "build:linux": "vue-cli-service build --mode linux",
若想运行 .env.linux 配置环境来进行打包，则可输入：npm run build:linux
也可通过 pycharm 的 npm 展示 窗口直观的看到命令的配置：
获取配置信息
如想在 js 中拿到 VUE_APP_NAME = "飞云"，可直接在想赋值的地方写上这行代码即可 process.env.VUE_APP_NAME
修改 axios 请求地址支持多环境
引用 VUE_APP_SERVER
在页面引入的 axios 命令下方，直接定义 axios 的 baseURL。
import axios from 'axios';
axios.defaults.baseURL=process.env.VUE_APP_SERVER;
页面使用
修改页面中调用 axios 的请求地址，只留下路径即可
知识点
- 配置文件需要创建在 vue 项目的根目录
- .env.** 的命名不局限于 prod dev test
- 配置书写采用键值对，= 连接
- 自定义变量必须以
VUE_APP_开头 - NODE_ENV=development 时,build 结果是不正确的
- package.json 下添加新增的环境配置
.env.xxx，后缀xxx和package.json里的指令的–mode xxx对应
- 通过设置
axios.defaults.baseURL，来统一设置后端的IP端口或域名