問題

項目基礎配置：Vite+Vue-Router 4.0+Vue3

項目進入聯(lián)調(diào)階段，開始配置接口代理。由于項目需要單點登錄，于是就給項目增加了一個域名，也就是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的狀態(tài)，網(wǎng)絡請求顯示500，我以為是路由的問題各種排查，甚至把官網(wǎng)Vue-Router的實例down下來，發(fā)現(xiàn)人家都是可以的。

最后一個一個配置排查發(fā)現(xiàn)，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
        }
      }
    }
  })
}

最后解決方法：調(diào)用接口的地方增加一個自定義前綴，在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/, '')
        }
      }
    }
  })
}

溯源

問題是解決了，但是為什么會出現(xiàn)這個問題呢？

• base：base 是 Vite 配置中的一個選項，用于指定項目的基本公共路徑。它決定了在構建和開發(fā)過程中加載靜態(tài)資源的路徑。如果你的項目部署在子路徑下（例如 https://example.com/my-app/），你可以將 base 設置為 /my-app/，這樣 Vite 就會正確地加載靜態(tài)資源。
• proxy：proxy 是 Vite 配置中的一個選項，用于配置開發(fā)服務器的代理轉(zhuǎn)發(fā)。通過 proxy，你可以在開發(fā)過程中將特定的 HTTP 請求代理到不同的目標地址。這對于解決前端開發(fā)過程中的跨域問題非常有用。

它們看起來獨立的配置選項，分別用于不同的功能：

• base是用于指定項目的基本公共路徑，影響靜態(tài)資源的加載路徑。
• proxy是用于配置開發(fā)服務器的代理轉(zhuǎn)發(fā)，解決跨域問題。

但是注意base的作用是影響靜態(tài)資源的加載路徑，那么靜態(tài)文件資源是怎么加載呢？

在vite的源碼中（https://github.com/vitejs/vite/blob/main/packages/vite/src/client/overlay.ts），我們可以看見這樣一句代碼：

可以看見，vite是將base拼接的地址通過fetch加載文件，fetch是一個異步請求，如果此時base與代理地址重名，那么靜態(tài)資源將會被代理到服務器，所以會出現(xiàn)文件找不到的問題。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論