腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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

更新時間：2022年07月24日 16:44:56 作者：溫情key

在項目中很多時候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁的原因及解決方式的相關(guān)資料,需要的朋友可以參考下

路由模式 history

新建項目什么都不動，路由模式：history, 直接npm run build打包

打包之后，直接打開dist文件里面的ndex.html可以看到頁面是空白的，控制臺是這樣的。

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

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

我們只需要在和package.json同級的地方新增一個vue.config.js文件，將路徑修改為相對路徑'./'

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

再次打包, 頁面不是空白了，但還有很多東西沒顯示完，正常的頁面是這個樣子

打包之后是這樣子

點擊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
})

頁面顯示和路由跳轉(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ū)別

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

打包路由選擇

前端測試用 hash 模式
項目上線不想要url帶#號的話使用history模式，不過使用history模式需要與后端溝通，需后端配置

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

您可能感興趣的文章:

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