欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于vue-cli3打包代碼后白屏的解決方案

 更新時間：2020年09月02日 12:05:03   作者：鄭布斯的個人博客  
這篇文章主要介紹了關(guān)于vue-cli3打包代碼后白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

前言 ：

最近使用了vue-cli3.0 開發(fā)了一個移動網(wǎng)頁端項目，準(zhǔn)備打包發(fā)布了。按照以往的流程 npm run build

問題來了

打開 dist index.html 文件發(fā)現(xiàn)白屏。打開調(diào)試后 發(fā)現(xiàn)文件引用路徑不對

根據(jù)以往的經(jīng)驗 根目錄下新建 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 運行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會自動強制進(jìn)入這個模式。

解決問題

終于弄明白了，如果使用history模式上線，必須要服務(wù)端在服務(wù)器上有對應(yīng)的模式才能使用history（看上面鏈接），如果服務(wù)器上沒有配置，可以先使用默認(rèn)的hash；

補充知識：vue打包項目以后白屏和圖片加載不出來問題解決方法

vue打包項目以后部署訪問白屏。查看控制臺是404.這是由于打包的時候沒有設(shè)置對靜態(tài)資源路徑。原文件是絕對路徑，需要改成相對路徑。

1.白屏修改config/index.js

2.圖片加載不出來，修改build/utils.js

以上這篇關(guān)于vue-cli3打包代碼后白屏的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實現(xiàn)圖片上傳預(yù)覽功能

    vue實現(xiàn)圖片上傳預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片上傳預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • Vue3實現(xiàn)組件拖拽實時預(yù)覽功能

    Vue3實現(xiàn)組件拖拽實時預(yù)覽功能

    這篇文章主要介紹了Vue3實現(xiàn)組件拖拽實時預(yù)覽功能,對于組件拖拽預(yù)覽,用戶可以在含有各種功能組件的列表中,選擇需要的組件進(jìn)行拖拽,需要的朋友可以參考下
    2023-12-12
  • vue實現(xiàn)百度下拉列表交互操作示例

    vue實現(xiàn)百度下拉列表交互操作示例

    這篇文章主要介紹了vue實現(xiàn)百度下拉列表交互操作,結(jié)合實例形式分析了vue.js使用jsonp針對百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下
    2019-03-03
  • JS 實現(xiàn)獲取對象屬性個數(shù)的方法小結(jié)

    JS 實現(xiàn)獲取對象屬性個數(shù)的方法小結(jié)

    這篇文章主要介紹了JS 實現(xiàn)獲取對象屬性個數(shù)的方法,結(jié)合實例形式總結(jié)分析了JS 獲取對象屬性個數(shù)的三種常用方法,需要的朋友可以參考下
    2023-05-05
  • Vue.js中vue-property-decorator的使用方法詳解

    Vue.js中vue-property-decorator的使用方法詳解

    vue-property-decorator是一個用于在Vue.js中使用TypeScript裝飾器的庫,它能夠簡化 Vue 組件的定義,使代碼更加簡潔和可維護(hù),它能夠簡化Vue組件的定義,使代碼更加簡潔和可維護(hù),本文將深入探討vue-property-decorator的使用方法,并展示如何在Vue.js項目中應(yīng)用它
    2024-08-08
  • HTML頁面中使用Vue示例進(jìn)階（快速學(xué)會上手Vue）

    HTML頁面中使用Vue示例進(jìn)階（快速學(xué)會上手Vue）

    Vue是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。VUE有兩種使用方式，一種實在html中直接使用vue做開發(fā)，一種是企業(yè)級的單頁面應(yīng)用。
    2023-02-02
  • vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案

    vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案

    這篇文章主要介紹了vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2018-04-04
  • vue-router的beforeRouteUpdate不觸發(fā)問題

    vue-router的beforeRouteUpdate不觸發(fā)問題

    這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法

    vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法

    這篇文章主要介紹了vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法，每種方法通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2022-08-08
  • vue3?頭像上傳?組件功能實現(xiàn)

    vue3?頭像上傳?組件功能實現(xiàn)

    這篇文章主要介紹了vue3頭像上傳組件功能,用到了自定義組件v-model的雙向綁定，使用axios + formData 上傳文件，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-05-05

最新評論