vue.js打包項(xiàng)目后頁面出現(xiàn)空白的解決辦法
相信很多剛剛接觸vue的伙伴會(huì)遇到這樣的問題，就是說vue項(xiàng)目在開發(fā)環(huán)境下一切正常，但是打包之后，打開index.html頁面卻是一片空白，打開控制臺(tái)發(fā)現(xiàn)這樣的錯(cuò)誤
出現(xiàn)這種情況要分兩個(gè)處理方式（vue-cli2和vue-cli3），先說vue-cli2； 首先找到config/index.js文件，將assetPublicPath的路徑改為“./”即可，
vue-cli3的話要稍微麻煩些，因?yàn)関ue-cli3簡(jiǎn)潔了許多，沒有了配置文件，所以需要自己創(chuàng)建，只能在項(xiàng)目的根目錄下創(chuàng)建，并且文件的名字只能是vue.config.js，然后在這個(gè)文件里面加上下面的代碼即可
module.exports = {
assetsDir: 'static',
parallel: false,
publicPath: './',
}
到了這步本來就可以了，但是有的小伙伴還是沒有顯示出來，那是因?yàn)槟愕穆酚赡Ｊ降年P(guān)系，你把你的路由模式改成“hash”就行了，雖然有點(diǎn)丑陋，但是至少功能出來了，如果你不想使用“hash”模式，非要用歷史模式的話，本地是不行的，必須要服務(wù)器配合，這里就說下怎么使用nginx配合vue使用歷史模式
安裝nginx就不說了 ，假設(shè)你已經(jīng)安裝好了nginx，在server里面加上
location /aaa {undefined
alias D:/bbb/ccc;
index index.html index.htm;
try_files $uri $uri/ /aaa/index.html;
}
其中/aaa是需要訪問的地址， D:/bbb/ccc是你文件真實(shí)存放的路徑，index指的就是你的入口文件，你的文件名如果不是index.html的話就替換成你的入口文件的名字，這里面最重要的是 try_files $uri $uri/ /aaa/index.html 這句話，這句話主要就是用來處理vue的歷史模式的，在配置完nginx后, 還要在項(xiàng)目里面加點(diǎn)東西, 其實(shí)也很簡(jiǎn)單, 就在項(xiàng)目的src目錄里面加上
在config/index.js里面加上
就可以了, 不然的話刷新頁面就會(huì)報(bào)錯(cuò)404, 當(dāng)然這是把項(xiàng)目放在二級(jí)路由的情況下, 如果是一級(jí)路由的話就可以不用加base這個(gè)屬性,?
最終效果如下。
這里就完成了vue打包到部署的流程了，希望對(duì)大家有些許的幫助吧。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧
uni-app基于VUE開發(fā)，通常組件的使用都是先安裝，然后全局或者局部引入，注冊(cè)，今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧，需要的朋友一起看看吧2021-08-08
Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由添加，vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
vue-resouce設(shè)置請(qǐng)求頭的三種方法
本篇文章主要介紹了vue-resouce設(shè)置請(qǐng)求頭的三種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
使用vue-cli創(chuàng)建項(xiàng)目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項(xiàng)目基于webpack模板打包的配置方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-07-07
前端Vue.js實(shí)現(xiàn)json數(shù)據(jù)導(dǎo)出到doc
這篇文章主要介紹了前端Vue.js實(shí)現(xiàn)json數(shù)據(jù)導(dǎo)出到doc，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
利用Vue實(shí)現(xiàn)一個(gè)累加向上漂浮動(dòng)畫
在不久之前,看到一個(gè)比較有意思的小程序,就是靜神木魚,可以實(shí)現(xiàn)在線敲木魚,自動(dòng)敲木魚,手盤佛珠,靜心頌缽的，下面就來揭秘如何實(shí)現(xiàn)這個(gè)小程序中敲木魚的累加向上漂浮動(dòng)畫，需要的可以參考一下2022-11-11
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。這篇文章主要介紹了一文快速詳解前端框架 Vue 最強(qiáng)大的功能,需要的朋友可以參考下2019-05-05
vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法
這篇文章主要介紹了vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
VueJs監(jiān)聽window.resize方法示例
本篇文章主要介紹了VueJs監(jiān)聽window.resize方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue?使用mescroll.js框架實(shí)現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實(shí)現(xiàn)下拉加載和上拉刷新功能,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07