問題

項(xiàng)目基礎(chǔ)配置：Vite+Vue-Router 4.0+Vue3

項(xiàng)目進(jìn)入聯(lián)調(diào)階段，開始配置接口代理。由于項(xiàng)目需要單點(diǎn)登錄，于是就給項(xiàng)目增加了一個(gè)域名，也就是vue-router中的base字段。

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

這個(gè)配置需要配合Vite.config.ts的base字段一起修改：

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

但是配置完后前端頁面一直處于404的狀態(tài)，網(wǎng)絡(luò)請求顯示500，我以為是路由的問題各種排查，甚至把官網(wǎng)Vue-Router的實(shí)例down下來，發(fā)現(xiàn)人家都是可以的。

最后一個(gè)一個(gè)配置排查發(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)用接口的地方增加一個(gè)自定義前綴，在vite.config中proxy配置中，增加一個(gè)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/, '')
        }
      }
    }
  })
}

溯源

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

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

它們看起來獨(dú)立的配置選項(xiàng)，分別用于不同的功能：

• base是用于指定項(xiàng)目的基本公共路徑，影響靜態(tài)資源的加載路徑。
• proxy是用于配置開發(fā)服務(wù)器的代理轉(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是一個(gè)異步請求，如果此時(shí)base與代理地址重名，那么靜態(tài)資源將會(huì)被代理到服務(wù)器，所以會(huì)出現(xiàn)文件找不到的問題。

總結(jié)

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

最新評(píng)論