vue-elementAdmin項目打包後白屏的問題

Vue項目打包後出現白屏的可能原因有很多

1.可能的思路和解決方案:

1. 確認靜態資源路徑是否正確。

   在 Vue 項目中,打包後會生成一個 dist 目錄,確保 index.html 引用的資源路徑都是相對於 dist 目錄的。

2. 確認路由是否正確配置。

   如果打包後出現了白屏,可能是因爲路由沒配置正確。可以檢查路由文件是否正確引入、是否正確配置了路由及其子路由等。

3. 確認打包後的 JS 文件是否存在。

   在 dist 目錄中,確保生成了 main.js 文件。如果沒有生成,說明打包過程出現了問題。

4. 確認是否啓動了服務器。

   如果在本地測試時沒有問題,但是打包後出現了白屏,可能是因爲本地使用了服務器,但是打包後未啓動服務器,需要手動啓動服務器。

5. 檢查是否使用了 Vue Router history 模式。

   如果使用了 Vue Router history 模式,在打包後需要配置服務器,以避免出現404錯誤。可以選擇在服務器上使用路由重定向來解決

2.解決問題的步驟

2.1進行 run build打包

使用
npm run build:prod
命令進行打包

2.2打包結果

會出現這樣的情況

生成了一個靜態的文件夾
打開index.html的時候

2.3報錯信息

會出現頁面空白的問題

打開F12查看一下這是爲啥

會發現這些文件的路徑訪問不到

3.在config文件中有一個index.js文件需要配置你的文件路徑

解決辦法:

***打開 vue.config.js

***找到 publicPath: '/' 

***將 publicPath: '/'改成 publicPath: './'

 

4.重新打包項目

然後使用npm run build:prod重新打包

如果這個時候,還是空白的話
打開瀏覽器,路徑都是正確的,沒有報錯
但是就是不顯示界面內容

5.改改histroy改成hash模式

需要打開routers.js文件
路由模式將histroy改成hash模式,起初 mode:'history'

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章