關(guān)于vue-cli3打包代碼后白屏的解決方案
前言 ：
最近使用了vue-cli3.0 開發(fā)了一個(gè)移動網(wǎng)頁端項(xiàng)目，準(zhǔn)備打包發(fā)布了。按照以往的流程 npm run build
問題來了
打開 dist index.html 文件發(fā)現(xiàn)白屏。打開調(diào)試后 發(fā)現(xiàn)文件引用路徑不對
根據(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配置可能會影像打包后的鏈接地址，然后看看我自己的router:
var router = new Router({
mode: 'history'
})
vue-router對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，路由會自動強(qiáng)制進(jìn)入這個(gè)模式。
解決問題
終于弄明白了，如果使用history模式上線，必須要服務(wù)端在服務(wù)器上有對應(yīng)的模式才能使用history（看上面鏈接），如果服務(wù)器上沒有配置，可以先使用默認(rèn)的hash；
補(bǔ)充知識：vue打包項(xiàng)目以后白屏和圖片加載不出來問題解決方法
vue打包項(xiàng)目以后部署訪問白屏。查看控制臺是404.這是由于打包的時(shí)候沒有設(shè)置對靜態(tài)資源路徑。原文件是絕對路徑，需要改成相對路徑。
1.白屏修改config/index.js
2.圖片加載不出來，修改build/utils.js
以上這篇關(guān)于vue-cli3打包代碼后白屏的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中scoped樣式的作用是通過在DOM結(jié)構(gòu)和CSS樣式上添加唯一標(biāo)記來實(shí)現(xiàn)樣式私有化和模塊化,這一功能是通過PostCSS轉(zhuǎn)譯實(shí)現(xiàn)的,總結(jié)了三條渲染規(guī)則：1. 為HTML DOM節(jié)點(diǎn)添加不重復(fù)的data屬性；2. 在每個(gè)CSS選擇器末尾添加當(dāng)前組件的data屬性選擇器2025-01-01
Vue-CLI 3.X 部署項(xiàng)目至生產(chǎn)服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3.X 部署項(xiàng)目至生產(chǎn)服務(wù)器的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載詳解
這篇文章主要介紹了Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載,項(xiàng)目較大路由較多時(shí)，路由拆分是一個(gè)不錯(cuò)的代碼優(yōu)化方案，按不同業(yè)務(wù)分為多個(gè)模塊，結(jié)構(gòu)清晰便于統(tǒng)一管理，本文通過示例給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值
這篇文章主要介紹了vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
我們在做項(xiàng)目的時(shí)候經(jīng)常會遇到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于Vite配置代理Proxy解決跨域問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue 的 v-model用法實(shí)例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
Vue AST的轉(zhuǎn)換實(shí)現(xiàn)方法講解
本節(jié)，我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換，指的是對AST進(jìn)行一系列操作，將其轉(zhuǎn)換為新的AST的過程。新的AST可以是原語言或原DSL的描述，也可以是其他語言或其他DSL的描述。例如，我們可以對模板AST進(jìn)行操作，將其轉(zhuǎn)換為JavaScriptAST2023-01-01