解決vue打包專案後點選dist資料夾中的index.html網頁顯示一片空白的問題
問題描述:
vue專案完成後,用npm run build 打包專案後,出現dist資料夾,點選dist資料夾下的index.html頁面出現一片空白。
原因分析:
沒有修改config配置檔案,直接打包,系統預設的是’/’(根目錄),而不是’./’(當前目錄),從而導致路徑不對,頁面載入不出來。
解決方案:
針對vue-cli3.0以下版本的可以直接將config/index.js檔案的assetsPublicPath: ‘/’;改為assetsPublicPath: ‘./’; 然後再重新打包一次就可以了。
對於vue-cli3.0及以上版本沒有config配置檔案的。需要自己在專案的根目錄下手動建一個配置檔案並添上以下程式碼:然後在重新打包一次就可以了。
module.exports = {
publicPath: './'
}
你以為這樣就結束了嗎?也許此時的你可以,但是小編我並沒有結束!!!
經過上面一番操作後,我點選導航欄它是這個樣子的:
百度得知是我開發時路由的方式選的不同,才導致這樣。
vue-router總共有三種模式:https://blog.csdn.net/lcj529/article/details/108740607這篇部落格裡面講了這三種路由方式。
具體解決辦法:將router中的index.js 中的mode: "history"註釋掉,然後再重新打包即可。
最後附上這篇部落格,羅列的更全面:
https://www.cnblogs.com/nuonuo-D/p/10516394.html
相關文章
- nginx配置 vue打包後的專案 解決重新整理頁面404問題|nginx配置多端訪問NginxVue
- 關於vue打包後scss檔案中背景圖片不顯示問題VueCSS
- 【爬坑日記】npm build之後,開啟dist資料夾下index.html為空白頁NPMUIIndexHTML
- vue中生成dist資料夾Vue
- vue-element-admin 解決壓縮打包之後背景圖片不顯示問題Vue
- 解決IOS中input失焦後,頁面上移,點選不了問題iOS
- .net專案使用Docker部署(包括解決後臺驗證碼,部署後不顯示的問題)Docker
- Vue 專案裡戳中你痛點的問題及解決辦法(更新)Vue
- 解決vue.js打包過後點選詳情頁面在伺服器中重新整理頁面空白Vue.js伺服器
- Vue專案打包常見問題整理Vue
- vue解決IE9及以下不顯示placeholder的問題VueIE9
- 若依解決VUE前端時間顯示問題Vue前端
- IE11 vue +webpack 專案中資料更新後頁面沒有重新整理問題IE11VueWeb
- 解決vue專案部署到Nginx重新整理頁面報404的問題VueNginx
- vue 專案引入字型圖示報錯、不顯示等問題Vue
- echarts 在 vue2 中的顯示問題EchartsVue
- 解決chrome,下載在資料夾中顯示,呼叫錯誤的關聯程式Chrome
- vue-cli4.x建立的專案中解決跨域問題Vue跨域
- 解決:vue專案,F5重新整理頁面後 title失效問題Vue
- Vue專案History模式404問題解決Vue模式
- SpringBoot 專案打包後獲取不到resource下資源的解決Spring Boot
- vue-解決background-image:url不顯示問題Vue
- win10資料夾圖示不正常顯示怎麼辦_win10電腦資料夾圖示顯示異常的解決方法Win10
- LiveCharts中文顯示亂碼問題的解決Echarts
- 解決 PBootCMS 後臺登入不顯示驗證碼的問題boot
- 在Vue 專案 webpack 打包中關於 背景圖片的路徑問題VueWeb
- AD9中元件無法顯示的問題解決元件
- Nginx 配置 Vue 專案解決跨域問題NginxVue跨域
- Maven專案META-INF資料夾不存在的問題Maven
- Blazor釋出到IIS中頁面一片空白的問題Blazor
- maven打包jar無法打入依賴專案問題解決MavenJAR
- SecureCRT - 自動斷開問題和標籤頁標題顯示的解決辦法Securecrt
- vue專案中遇到的問題總結Vue
- vue專案打包,解決靜態資源無法載入和路由載入無效(404)問題Vue路由
- 關於黑馬旅遊網的實現 --- 分頁查詢功能,點選分頁碼不顯示資料
- Windows共享資料夾常見問題解決方法Windows
- win10 如何顯示隱藏資料夾_win10 如何顯示隱藏的資料夾Win10
- SpringBoot 解決打包釋出後讀取不到 json 檔案問題Spring BootJSON