Vue3配置代理后页面500/404问题

简天悦

问题

项目基础配置：Vite+Vue-Router 4.0+Vue3
项目进入联调阶段，开始配置接口代理。由于项目需要单点登录，于是就给项目增加了一个域名，也就是vue-router中的base字段。

1. const router = VueRouter.createRouter({
   
2.   history: VueRouter.createWebHashHistory('/my-app'),
   
3.   routes: []
   
4. })

复制代码

这个配置需要配合Vite.config.ts的base字段一起修改：

1. export default ({ mode }) => {
   
2.   return defineConfig({
   
3.      base: '/my-app'
   
4.   })
   
5. }

复制代码

但是配置完后前端页面一直处于404的状态，网络请求显示500，我以为是路由的问题各种排查，甚至把官网Vue-Router的实例down下来，发现人家都是可以的。
最后一个一个配置排查发现，proxy的代理的接口前缀和base重名了,修改代理名称就可以

1. export default ({ mode }) => {
   
2.   return defineConfig({
   
3.      base: '/my-app',
   
4.      server: {
   
5.      open: true,
   
6.      port: 3000,
   
7.      host: '0.0.0.0',
   
8.      proxy: {
   
9.         '/my-app': {
   
10.           target: '...',
    
11.           changeOrigin: true,
    
12.           ws: true
    
13.         }
    
14.       }
    
15.     }
    
16.   })
    
17. }

复制代码

最后解决方法：调用接口的地方增加一个自定义前缀，在vite.config中proxy配置中，增加一个rewrite即可。

1. axios.get('/test/my-app/interface1')
   
2. export default ({ mode }) => {
   
3.   return defineConfig({
   
4.      base: '/my-app',
   
5.      server: {
   
6.      open: true,
   
7.      port: 3000,
   
8.      host: '0.0.0.0',
   
9.      proxy: {
   
10.         '/test': {
    
11.           target: '...',
    
12.           changeOrigin: true,
    
13.           ws: true,
    
14.           rewrite: (path) => path.replace(/^\/test/, '')
    
15.         }
    
16.       }
    
17.     }
    
18.   })
    
19. }

复制代码

溯源

问题是解决了，但是为什么会出现这个问题呢？

• 1. base

  复制代码
  ：base 是 Vite 配置中的一个选项，用于指定项目的基本公共路径。它决定了在构建和开发过程中加载静态资源的路径。如果你的项目部署在子路径下（例如 https://example.com/my-app/），你可以将 base 设置为 /my-app/，这样 Vite 就会正确地加载静态资源。
  
• 1. proxy

  复制代码
  ：proxy 是 Vite 配置中的一个选项，用于配置开发服务器的代理转发。通过 proxy，你可以在开发过程中将特定的 HTTP 请求代理到不同的目标地址。这对于解决前端开发过程中的跨域问题非常有用。
  

它们看起来独立的配置选项，分别用于不同的功能：

• 1. base

  复制代码
  是用于指定项目的基本公共路径，影响静态资源的加载路径。
  
• 1. proxy

  复制代码
  是用于配置开发服务器的代理转发，解决跨域问题。
  

但是注意base的作用是影响静态资源的加载路径，那么静态文件资源是怎么加载呢？
在vite的源码中（https://github.com/vitejs/vite/blob/main/packages/vite/src/client/overlay.ts），我们可以看见这样一句代码：

可以看见，vite是将base拼接的地址通过fetch加载文件，fetch是一个异步请求，如果此时base与代理地址重名，那么静态资源将会被代理到服务器，所以会出现文件找不到的问题。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！