Vue域名配置及代理

背景：对于vue的调试时，大家都知道vscode会在本地开一个服务，请求首先到本地服务，由本地服务请求远程服务器得到结果后再返回给页面使用，页面为什么不直接请求远程就不讨论了，因为涉及跨域安全等等，这里说一下个人理解工程里的配置。

首先是工程目录中有.env，.env.buildDevApp，.env.buildApp，.env.devApp等配置，可能你的和我名字不太样，但都是打包某个环境或运行时需要的配置文件，理论上这几个文件里定的变量名都一样的，就是值不样。

//.env
URL=""

//.env.buildDevApp 测试
URL="https://dev.abc.com"

//.env.buildApp 正式
URL="https://abc.com"

//.env.devApp 运行时
URL="/api"

以上是环境配置文件(不同环境打包或运行时)：
1、当你在打包或运行时，会用你选的不同环境对应不同文件里URL的值，覆盖掉.env的URL的值，其他变量同理。

2、不同环境是在后面package.json里定义体现。

// vite.config.js 代理配置
const proxy = {
   '/api': {
     // target: 'https://abc.com',
     target: 'https://dev.abc.com',
     changeOrigin: true,
     rewrite: path => path.replace(/^\/api/, '')
   },
}

以上是运行时代理配置关键代码
1、代码中proxy下的"/api"和要和.env.devApp运行时配置文件的URL="/api"要对应上。
2、如果运行时想切换正式和测试，直接修改代码里target的值，给正式或测试即可。

// request.js
const server = axios.create({
    baseURL: import.meta.env.URL, //这里就是引用.env文件里URL的值
    timeout: 30000
})

如果有不同的域名，就在各env配置文件里定义多个URL1、URL2，也需要创建多个reqeust1.js，request2.js，不同的request文件引用import.meta.env.URL1、import.meta.env.URL2，在定义api.js的时候导入不同的request即可。

// package.json
"scripts": {
  "dev:app": "vite serve --mode=devApp",
  "build:dev": "vite build --mode=buildDevApp",
  "build:release": "vite build --mode=buildApp",
},

由于天天写业务代码，也没时间去看文档资料，以前都很蒙，各种修改尝试，现在思路相对来说清晰一点。