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, //代理websockets
        changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
        pathRewrite: {
          // '^/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 操作系统上，环境变量不区分大小写。