解決vue-cli項(xiàng)目打包出現(xiàn)空白頁和路徑錯(cuò)誤的問題
vue-cli項(xiàng)目打包：
1. 命令行輸入：npm run build
打包出來后項(xiàng)目中就會(huì)多了一個(gè)文件夾dist，這就是我們打包過后的項(xiàng)目。
第一個(gè)問題，文件引用路徑。我們直接運(yùn)行打包后的文件夾中的index.html文件，會(huì)看到網(wǎng)頁一片空白，f12調(diào)試，全是css，js路徑引用錯(cuò)誤的問題。
解決：到config文件夾中打開index.js文件。
文件里面有兩個(gè)assetsPublicPath屬性，更改第一個(gè)，也就是更改build里面的assetsPublicPath屬性：
assetsPublicPath屬性作用是指定編譯發(fā)布的根目錄，‘/'指的是項(xiàng)目的根目錄 ，'./'指的是當(dāng)前目錄。
改好之后重新打包項(xiàng)目，運(yùn)行index.html文件，我們可以看到?jīng)]有報(bào)錯(cuò)了。但是router-view里面的內(nèi)容卻出不來了。
第二個(gè)問題：router-view中的內(nèi)容顯示不出來。路由history模式。
這個(gè)坑是當(dāng)你使用了路由之后，在沒有后端配合的情況下就手賤打開路由history模式的時(shí)候，打包出來的文件也會(huì)是一片空白的情況，
很多人踩這個(gè)坑的時(shí)候花了很多時(shí)間，網(wǎng)上的教程基本上都是說的第一個(gè)坑，這個(gè)坑很少有人提起。
解決：// mode: 'history',//將這個(gè)模式關(guān)閉就好
這里并不是說不能打開這個(gè)模式，這個(gè)模式需要后端設(shè)置的配合，詳情可以看：路由文檔
以上這篇解決vue-cli項(xiàng)目打包出現(xiàn)空白頁和路徑錯(cuò)誤的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue父子組件傳值不能實(shí)時(shí)更新的解決方法
Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法,需要的朋友可以參考下2023-05-05
Vue?3?中動(dòng)態(tài)賦值?ref?的應(yīng)用示例解析
Vue3引入了Composition?API,其中ref是核心概念,允許開發(fā)者聲明響應(yīng)式狀態(tài),本文通過一個(gè)具體示例,探討了在Vue3中如何使用ref進(jìn)行動(dòng)態(tài)賦值,尤其是在處理DOM相關(guān)操作時(shí)的應(yīng)用,通過ref動(dòng)態(tài)賦值,可以有效管理組件內(nèi)的狀態(tài),提高代碼的可維護(hù)性和清晰度2024-09-09
最近需要在項(xiàng)目中使用地圖顯示點(diǎn)位信息,所以引入了騰訊地圖,這篇文章主要給大家介紹了關(guān)于Vue引入騰訊地圖(搜索獲取定位)的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別
這篇文章主要介紹了Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
今天小編就為大家分享一篇解決vue v-for src 圖片路徑問題 404，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn)
今天小編就為大家分享一篇Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11