vite跨域proxy设置与开发、生产环境的接口配置，接口在生产环境下，还能使用proxy代理地址吗

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({
  //解决在路径中用@代替src目录
  resolve: {
    alias: { "@": resolve("src") },
  },
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  //这个是新增的本地服务器与proxy代理设置
  server: {
    open: false,
    port: 5171,
    https: false,
    hotOnly: false,
    proxy: {
      "/mis": {
        target: "http://www.imqd.cn",
        changeOrigin: true, //是否跨域
        // rewrite: (path) => path.replace(/^\/mis/, ""), //因为后端接口有mis前缀，所以不需要替换
        // ws: true,                       //是否代理 websockets
        // secure: true, //是否https接口
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

重点关注'/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'
1
2

这时不用写rewrite了。表示请求的本地地址和跨域地址一样，只是域名不一样，如下所示：

http://localhost:5171/mis/auth/login //本地
http://www.imqd.cn/mis/auth/login  //要代理的后端真实接口地址
1
2

如果后端没有提供可以替换的’/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/, ""), //后端接口没有api后缀，所以需要替换
        // ws: true,                       //是否代理 websockets
        // secure: true, //是否https接口
      },
},
1
2
3
4
5
6
7
8
9

然后在.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中设置的变量也在构建过程中体现并分布到了各个接口中，如下图所示:

如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师！