为什么需要配置多环境？
在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求,和基地址可能都不尽相同,所以就引出了环境变量,动态识别我们的环境,在不同的生产环境下可以使用相应的配置变量
一般一个项目都会有以下 3 种环境： （test、development、production）
- 开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）
- 测试环境（测试阶段，上线前版本，除了一些 bug 的修复，基本不会和上线版本有很大差别）
- 生产环境（上线阶段，正式对外发布的版本，一般会进行优化，关掉错误报告） 来源： blog.csdn.net/m0_57904695…
创建环境文件
创建配置文件格式为.env.***,***为具体的环境描述，内容可任意。
位于vue的web根目录下创建两个配置文件.env.dev,.env.prod,分别表示开发环境，生产环境。
NODE_ENV=development
VUE_APP_SERVER=http://localhost:8080
NODE_ENV=production
VUE_APP_SERVER=http://server.imooc.com
说明： “这块只需要VUE_APP_*** 以这样的形式命名就ok了，后面大写还是小写这块看你心情都可以。” 1
配置npm命令
在vue的package.json的script下，分别创建启动服务时开发环境，生成环境；构建时的开发环境，生产环境。主要是添加参数--mode 配置文件的环境名,如.env.dev,则为--mode dev。其中
"serve-dev": "vue-cli-service serve --mode dev"的"serve-dev"的内容表示命令名，命名无要求，符合实际需求。
"serve-dev": "vue-cli-service serve --mode dev",
"serve-prod": "vue-cli-service serve --mode prod ",
"build-dev": "vue-cli-service build --mode dev",
"build-prod": "vue-cli-service build --mode prod",
配置完，在IntelliJ IDea中，可以在npm面板刷新，可看到新的命令。
验证多环境配置
在vue的main.ts文件中添加内容，这样启动服务，页面控制台能看到信息。
console.log('环境: ',process.env.NODE_ENV);
console.log('服务器: ',process.env.VUE_APP_SERVER);
说明此时是启动是开发环境服务。
修改axios请求域
原本axios请求的地址为：
axios.get("http://localhost:8080/ebook/list")
通过读取配置文件信息，修改为：
axios.get(process.env.VUE_APP_SERVER + "/ebook/list")
这里的process.env.VUE_APP_SERVER 也即配置文件中的VUE_APP_SERVER，通过字符串拼串成完整url
设置axios请求域 baseurl
为了统一管理，减少重复代码编写，设置请求域 baseurl这样，请求地址无需写请求域。
1、设置base url
import axios from 'axios';
axios.defaults.baseURL = process.env.VUE_APP_SERVER
2、使用baseurl
axios.get("/ebook/list")
小技巧: 修改前端启动的端口
通过添加参数--port 端口
"serve-dev": "vue-cli-service serve --mode dev --port 8080"
这样启动Vue的启动默认端口是8080
