vue 环境配置.env；.env.development；.env.production配置

vue-cli3 配置文件的环境配置
三个文件
.env //开发和生成环境都用到的配置
.env.development //开发用到的，优先级大于 .env文件
.env.production //打包生成用到的，优先级大于 .env文件

注意：文件内的命名规则（我死到这儿了）

必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，必须是 VUE_APP_ 开头，

注意：文件存放位置（我也死到这儿了）

跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录，跟目录

.env.development 文件

# 注意开头 VUE_APP_*
# axios的baseUrl地址
VUE_APP_BASEURL=
# 本地启动服务地址端口
VUE_APP_POST=6999# 连接的服务器的地址
VUE_APP_PROXY_URL=http://127.0.0.1:3000

.env.production 文件

# axios的baseUrl地址
VUE_APP_BASEURL=
# 代理地址端口
VUE_APP_POST=3000
# 代理使用的地址
VUE_APP_PROXY_URL=http://localhost:3000

通过 npm run serve 运行时： process.env.VUE_APP_POST <===> 30001
通过 npm run build 运行时： process.env.VUE_APP_POST <===> 3000

最后再说一遍
开头 VUE_APP_；文件放在跟目录
开头 VUE_APP_；文件放在跟目录
开头 VUE_APP_；文件放在跟目录
开头 VUE_APP_；文件放在跟目录
开头 VUE_APP_；文件放在跟目录

测试

devServer: {port: process.env.VUE_APP_POST || '6999', // 设置端口号,前端页面端口proxy: {//代理'/api': {target: process.env.VUE_APP_PROXY_URL, //API服务器的地址ws: true, //代理websocketschangeOrigin: true, // 是否跨域，虚拟的站点需要更管originpathRewrite: {// '^/api'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8081/api' 转接为 http://localhost:8081/'^/api': '',},},},},

axios.js

import axios from 'axios';
let baseURL = process.env.VUE_APP_BASEURL;
const mainInstance = axios.create({ baseURL, timeout: 60000 });
//http request拦截
mainInstance.interceptors.request.use((config) => {console.log(config, 'config');return config;},(error) => {return Promise.reject(error);}
);
//http response 拦截
mainInstance.interceptors.response.use((res) => {return res;},(error) => {return Promise.reject(new Error(error));}
);
export default mainInstance;

在 Windows 操作系统上，环境变量不区分大小写。