使用Vue Router路由懶加載引發(fā)的生產(chǎn)頁面白屏問題的解決方法

更新時間：2025年09月18日 08:33:37 作者：FarmerLiusun

這篇文章主要介紹了使用Vue Router 路由懶加載引發(fā)的生產(chǎn)頁面白屏問題的原因和解決方法,并有相關的代碼示例和圖文供大家參考,需要的朋友可以參考下

1.項目技術棧

項目使用vue3 + Vue Router + ant-design-vue，構建工具使用 vite.

框架： vue3
組件庫： andt-design-vue
路由： Vue Router
構建工具： vite

2.問題現(xiàn)象

1.本地開發(fā)階段，一切正常沒有任何問題。
2.通過nginx部署到開發(fā)環(huán)境后，訪問該前端，其他所有功能均正常無任何問題。
3.當訪問/deviceMgmt/deviceLogQuery頁面時，頁面白屏，控制臺無任何報錯。

3.問題排查

剛看到這個問題還是挺懵的，自己本地開發(fā)環(huán)境沒有問題，一部署到開發(fā)環(huán)境就出問題，而且還是沒有任何報錯、警告、提示。根據(jù)上面的現(xiàn)象，初步想到以下幾個可能造成該問題的原因：

3.1 路徑問題

前端訪問的路徑寫錯了
路由配置的路徑跟組件的路徑寫錯了

但是通過仔細對比發(fā)現(xiàn)，路由配置路徑跟組件路徑都沒有任何問題，故排除了路徑問題

3.1 路由配置問題

查看頁面元素發(fā)現(xiàn)，訪問/deviceMgmt/deviceLogQuery路徑時，app容器內(nèi)的組件為空。 并且之后發(fā)現(xiàn)之前部署的上一個前端版本是沒有問題的，但是只要換成現(xiàn)在重新編譯的版本就有這個問題。

通過git版本對比發(fā)現(xiàn)，原來是路由懶加載的配置寫錯了造成的

   // router>index.js
    const routes = [
        {
          name: 'deviceLogQuery',
          path: '/deviceMgmt/deviceLogQuery',
          //? 正確寫法
          // component: () => import('../views/deviceLogQuery/test.vue'),
          // ? 錯誤寫法
          component: import('../views/deviceLogQuery/index.vue'),
        }
    ]

路由配置中如果使用路由懶加載，呢組件的導入配置，component 是通過() => import(./MyPage.vue) 的方式導入。 這里少了 () => ，直接導入了。