關(guān)于vue-cli3打包代碼后白屏的解決方案
前言 ：
最近使用了vue-cli3.0 開發(fā)了一個(gè)移動(dòng)網(wǎng)頁端項(xiàng)目，準(zhǔn)備打包發(fā)布了。按照以往的流程 npm run build
問題來了
打開 dist index.html 文件發(fā)現(xiàn)白屏。打開調(diào)試后 發(fā)現(xiàn)文件引用路徑不對(duì)
根據(jù)以往的經(jīng)驗(yàn) 根目錄下新建 vue.config.js
配置 publicPath
module.exports = {
...
runtimeCompiler: true,
publicPath: './'
...
}
滿心歡喜的打開，結(jié)果還是白屏。打開調(diào)試發(fā)現(xiàn)文件路徑是正確的，這就唧唧了！！。
發(fā)現(xiàn)問題
各種百度。發(fā)現(xiàn)了樣的問題 一看vue-router的mode配置可能會(huì)影像打包后的鏈接地址，然后看看我自己的router:
var router = new Router({
mode: 'history'
})
vue-router對(duì)mode的說明：
mode
類型: string
默認(rèn)值: "hash" (瀏覽器環(huán)境) | "abstract" (Node.js 環(huán)境)
可選值: "hash" | "history" | "abstract"
配置路由模式:
hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。
history: 依賴 HTML5 History API 和服務(wù)器配置。
abstract: 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式。
解決問題
終于弄明白了，如果使用history模式上線，必須要服務(wù)端在服務(wù)器上有對(duì)應(yīng)的模式才能使用history（看上面鏈接），如果服務(wù)器上沒有配置，可以先使用默認(rèn)的hash；
補(bǔ)充知識(shí)：vue打包項(xiàng)目以后白屏和圖片加載不出來問題解決方法
vue打包項(xiàng)目以后部署訪問白屏。查看控制臺(tái)是404.這是由于打包的時(shí)候沒有設(shè)置對(duì)靜態(tài)資源路徑。原文件是絕對(duì)路徑，需要改成相對(duì)路徑。
1.白屏修改config/index.js
2.圖片加載不出來，修改build/utils.js
以上這篇關(guān)于vue-cli3打包代碼后白屏的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue3實(shí)現(xiàn)組件拖拽實(shí)時(shí)預(yù)覽功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)組件拖拽實(shí)時(shí)預(yù)覽功能,對(duì)于組件拖拽預(yù)覽,用戶可以在含有各種功能組件的列表中,選擇需要的組件進(jìn)行拖拽,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對(duì)百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
JS 實(shí)現(xiàn)獲取對(duì)象屬性個(gè)數(shù)的方法小結(jié)
這篇文章主要介紹了JS 實(shí)現(xiàn)獲取對(duì)象屬性個(gè)數(shù)的方法,結(jié)合實(shí)例形式總結(jié)分析了JS 獲取對(duì)象屬性個(gè)數(shù)的三種常用方法,需要的朋友可以參考下2023-05-05
Vue.js中vue-property-decorator的使用方法詳解
vue-property-decorator是一個(gè)用于在Vue.js中使用TypeScript裝飾器的庫,它能夠簡(jiǎn)化 Vue 組件的定義,使代碼更加簡(jiǎn)潔和可維護(hù),它能夠簡(jiǎn)化Vue組件的定義,使代碼更加簡(jiǎn)潔和可維護(hù),本文將深入探討vue-property-decorator的使用方法,并展示如何在Vue.js項(xiàng)目中應(yīng)用它2024-08-08
HTML頁面中使用Vue示例進(jìn)階（快速學(xué)會(huì)上手Vue）
Vue是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。VUE有兩種使用方式，一種實(shí)在html中直接使用vue做開發(fā)，一種是企業(yè)級(jí)的單頁面應(yīng)用。2023-02-02
vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案
這篇文章主要介紹了vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目 npm run build 打包項(xiàng)目防止瀏覽器緩存的操作方法
這篇文章主要介紹了vue項(xiàng)目 npm run build 打包項(xiàng)目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法，每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue3頭像上傳組件功能,用到了自定義組件v-model的雙向綁定，使用axios + formData 上傳文件，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05