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

问题

项目基础配置：Vite+Vue-Router 4.0+Vue3

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

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

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

export default ({ mode }) => {
  return defineConfig({
     base: '/my-app'
  })
}

但是配置完后前端页面一直处于404的状态，网络请求显示500，我以为是路由的问题各种排查，甚至把官网Vue-Router的实例down下来，发现人家都是可以的。

最后一个一个配置排查发现，proxy的代理的接口前缀和base重名了,修改代理名称就可以

export default ({ mode }) => {
  return defineConfig({
     base: '/my-app',
     server: {
     open: true,
     port: 3000,
     host: '0.0.0.0',
     proxy: {
        '/my-app': {
          target: '...',
          changeOrigin: true,
          ws: true
        }
      }
    }
  })
}

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

axios.get('/test/my-app/interface1')
 export default ({ mode }) => {
  return defineConfig({
     base: '/my-app',
     server: {
     open: true,
     port: 3000,
     host: '0.0.0.0',
     proxy: {
        '/test': {
          target: '...',
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(/^\/test/, '')
        }
      }
    }
  })
}

溯源

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

• base：base 是 Vite 配置中的一个选项，用于指定项目的基本公共路径。它决定了在构建和开发过程中加载静态资源的路径。如果你的项目部署在子路径下（例如 https://example.com/my-app/），你可以将 base 设置为 /my-app/，这样 Vite 就会正确地加载静态资源。
• proxy：proxy 是 Vite 配置中的一个选项，用于配置开发服务器的代理转发。通过 proxy，你可以在开发过程中将特定的 HTTP 请求代理到不同的目标地址。这对于解决前端开发过程中的跨域问题非常有用。

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

• base是用于指定项目的基本公共路径，影响静态资源的加载路径。
• proxy是用于配置开发服务器的代理转发，解决跨域问题。

但是注意base的作用是影响静态资源的加载路径，那么静态文件资源是怎么加载呢？

在vite的源码中（https://github.com/vitejs/vite/blob/main/packages/vite/src/client/overlay.ts），我们可以看见这样一句代码：

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。