vite的proxy开发环境设置
环境：
- vite 4.4.9(2023-9-27为止的最新版)
- vue3 3.3.4(2023-9-27为止的最新版)
- vant 4.6.8(2023-9-27为止的最新版)-这个只是UI框架，不影响配置
- nodejs 16.16.0
开发环境配置需要在vite.config.js中进行。
完整代码如下：
`import { defineConfig } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "@vant/auto-import-resolver";
function resolve(dir) {
return path.join(__dirname, dir);
}
export default defineConfig({
resolve: {
alias: { "@": resolve("src") },
},
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
server: {
open: false,
port: 5171,
https: false,
hotOnly: false,
proxy: {
"/mis": {
target: "http://www.imqd.cn",
changeOrigin: true,
},
},
},
});`
重点关注'/mis'这里
如果是要访问后端的这个接口：http://www.imqd.cn/mis/auth/login，且你在request.js中写接口时，不想写mis/auth/login，而是想写/auth/login时，就需要像上面配置。它的意思是将本地的地址通过代理转发替换为后端地址，让它以为是同域请求。
更简单的理解是，它会找到后端接口的url中的'/mis'，将其换为本地地址。
意思就是：http://www.imqd.cn/mis/auth/login会换成http://localhost/auth/login，但是这样会报404错误，因为替换后，接口少了mis，就需要加上才行，就比如本地http://192.168.8.87:5171/mis/auth/login的这个接口其实要等价访问后端的http://www.imqd.cn/mis/auth/login这个接口才行。添加的办法如下：
在.env.development文件中写一个变量，统一添加该前缀：
`# base api
VITE_BASE_API = '/mis'`
这时不用写rewrite了。表示请求的本地地址和跨域地址一样，只是域名不一样，如下所示：
`http://localhost:5171/mis/auth/login
http://www.imqd.cn/mis/auth/login`
如果后端没有提供可以替换的’/mis’等可替换的后缀的处理办法
如果后端提供的接口没有/mis等后缀，接口地址直接为：http://www.imqd.cn/auth/login那怎么设置请求代理地址呢？
这时也简单，可以用任意后缀来代替，最常见的就是用/api代替了，比如本地请求用http://localhost/api/auth/login来代理http://www.imqd.cn/auth/login，这样就需要修改vite.config.js如下：
`proxy: {
"/api": {
target: "http://www.imqd.cn",
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ""),
},
},`
然后在.env.development文件中改为VITE_BASE_API = '/api'即可
接口如何区分.env.development开发和.env.production生产环境
其实对应的就是如何使用.env.development和.env.production环境。
可以在package.json中看到vite的script：
`"scripts": {
"dev": "vite --mode development",
"start": "vite --host 192.168.8.87",
"build": "vite build"
},`
* 1
* 2
* 3
* 4
* 5
默认情况下，'npm run dev'即为开发环境，npm run build即为生产环境，不管在哪种环境下，你可以通过在代码中使用import.meta.env.VITE_BASE_API来调用两种开发环境的env文件下的VITE_BASE_API变量的值，如果是开发环境，就会读取.env.development中的值，生产环境，就会读取.env.production中的值。
接口在生产环境下，还能使用proxy代理地址吗？
请注意，这也是很多人会忽略的。只有在开发环境才会走vue.config.js里面的代码，proxy的代理才会生效。在生产环境下，因为前端代码已经被工程化构建化了（即dist目录下的文件），只有纯前端代码，他通常会部署到和后端服务一样的域名下，用的是相对地址，就不存在跨域了。.env.production中设置的变量也在构建过程中体现并分布到了各个接口中，如下图所示:
