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

vue打包后出現(xiàn)空白頁(yè)的原因及解決方式詳解

 更新時(shí)間:2022年07月24日 16:44:56   作者:溫情key  
在項(xiàng)目中很多時(shí)候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來(lái)的html直接打開(kāi)是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁(yè)的原因及解決方式的相關(guān)資料,需要的朋友可以參考下

路由模式 history

新建項(xiàng)目什么都不動(dòng),路由模式:history, 直接npm run build打包

打包之后,直接打開(kāi)dist文件里面的ndex.html可以看到頁(yè)面是空白的,控制臺(tái)是這樣的。

再看看網(wǎng)頁(yè)源碼, 對(duì)比dist文件夾結(jié)構(gòu)可以看到資源路徑的引入是錯(cuò)誤的,應(yīng)該用'./'而不是'/'

那怎么修改打包之后的路徑呢?查看vue-cli官網(wǎng)配置參考中的publicPath

我們只需要在和package.json同級(jí)的地方新增一個(gè)vue.config.js文件,將路徑修改為相對(duì)路徑'./'

// vue.config.js
module.exports = {
    publicPath: './',
}

再次打包, 頁(yè)面不是空白了,但還有很多東西沒(méi)顯示完,正常的頁(yè)面是這個(gè)樣子

打包之后是這樣子

點(diǎn)擊About進(jìn)行路由跳轉(zhuǎn)是這樣子

路由模式 hash

改一下路由模式,找到router/index.js文件, 將history修改為hash, 再進(jìn)行打包

// router/index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

頁(yè)面顯示和路由跳轉(zhuǎn)就都可以了

總結(jié)

1. 修改路徑

// vue.config.js
module.exports = {
    publicPath: './',
}

2. 更改路由模式

// router/index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

路由模式拓展

路由的hash和history模式的區(qū)別

  1. 首先hash模式url帶#號(hào),history不帶#號(hào)
  2. hash模式前端路由修改的是hash值(#及以后),對(duì)后端沒(méi)影響,因此改變hash也不會(huì)重新加載頁(yè)面,比如修改為了不存在的#123頁(yè)面,頁(yè)面不會(huì)跳轉(zhuǎn);
    history模型剛好相反,沒(méi)有對(duì)應(yīng)的頁(yè)面就會(huì)出現(xiàn)404

打包路由選擇

  • 前端測(cè)試用 hash 模式
  • 項(xiàng)目上線不想要url帶#號(hào)的話使用history模式,不過(guò)使用history模式需要與后端溝通,需后端配置

到此這篇關(guān)于vue打包后出現(xiàn)空白頁(yè)的原因及解決方式的文章就介紹到這了,更多相關(guān)vue打包后空白頁(yè)解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)

    Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)

    這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能

    vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能

    這篇文章主要給大家介紹了關(guān)于vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能的相關(guān)資料,在日常操作中,相信很多人在Vue怎么用插件實(shí)現(xiàn)打印功能問(wèn)題上存在疑惑,需要的朋友可以參考下
    2023-07-07
  • vue中如何使用math.js

    vue中如何使用math.js

    這篇文章主要介紹了vue中如何使用math.js問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vue ECharts設(shè)置主題實(shí)現(xiàn)方法介紹

    Vue ECharts設(shè)置主題實(shí)現(xiàn)方法介紹

    這篇文章主要介紹了Vue ECharts設(shè)置主題,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • 解決echart在vue中id重復(fù)問(wèn)題

    解決echart在vue中id重復(fù)問(wèn)題

    這篇文章主要介紹了解決echart在vue中id重復(fù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue中Mustache引擎插值語(yǔ)法使用詳解

    Vue中Mustache引擎插值語(yǔ)法使用詳解

    在Vue中通過(guò)Mustache模板引擎將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache模板引擎插值語(yǔ)法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • vue時(shí)間線組件的使用方法

    vue時(shí)間線組件的使用方法

    這篇文章主要為大家詳細(xì)介紹了vue時(shí)間線組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇

    詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇

    這篇文章主要介紹了詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-05-05
  • Vue淺析axios二次封裝與節(jié)流及防抖的實(shí)現(xiàn)

    Vue淺析axios二次封裝與節(jié)流及防抖的實(shí)現(xiàn)

    axios是基于promise的HTTP庫(kù),可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios,?axios),本文給大家介紹axios的二次封裝和節(jié)流與防抖
    2022-08-08
  • Vue父組件調(diào)用子組件事件方法

    Vue父組件調(diào)用子組件事件方法

    下面小編就為大家分享一篇Vue父組件調(diào)用子組件事件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02

最新評(píng)論