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'