vue.js打包項(xiàng)目后頁(yè)面出現(xiàn)空白的解決辦法
相信很多剛剛接觸vue的伙伴會(huì)遇到這樣的問(wèn)題，就是說(shuō)vue項(xiàng)目在開(kāi)發(fā)環(huán)境下一切正常，但是打包之后，打開(kāi)index.html頁(yè)面卻是一片空白，打開(kāi)控制臺(tái)發(fā)現(xiàn)這樣的錯(cuò)誤
出現(xiàn)這種情況要分兩個(gè)處理方式（vue-cli2和vue-cli3），先說(shuō)vue-cli2； 首先找到config/index.js文件，將assetPublicPath的路徑改為“./”即可，
vue-cli3的話要稍微麻煩些，因?yàn)関ue-cli3簡(jiǎn)潔了許多，沒(méi)有了配置文件，所以需要自己創(chuàng)建，只能在項(xiàng)目的根目錄下創(chuàng)建，并且文件的名字只能是vue.config.js，然后在這個(gè)文件里面加上下面的代碼即可
module.exports = {
assetsDir: 'static',
parallel: false,
publicPath: './',
}
到了這步本來(lái)就可以了，但是有的小伙伴還是沒(méi)有顯示出來(lái)，那是因?yàn)槟愕穆酚赡Ｊ降年P(guān)系，你把你的路由模式改成“hash”就行了，雖然有點(diǎn)丑陋，但是至少功能出來(lái)了，如果你不想使用“hash”模式，非要用歷史模式的話，本地是不行的，必須要服務(wù)器配合，這里就說(shuō)下怎么使用nginx配合vue使用歷史模式
安裝nginx就不說(shuō)了 ，假設(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是需要訪問(wèn)的地址， D:/bbb/ccc是你文件真實(shí)存放的路徑，index指的就是你的入口文件，你的文件名如果不是index.html的話就替換成你的入口文件的名字，這里面最重要的是 try_files $uri $uri/ /aaa/index.html 這句話，這句話主要就是用來(lái)處理vue的歷史模式的，在配置完nginx后, 還要在項(xiàng)目里面加點(diǎn)東西, 其實(shí)也很簡(jiǎn)單, 就在項(xiàng)目的src目錄里面加上
在config/index.js里面加上
就可以了, 不然的話刷新頁(yè)面就會(huì)報(bào)錯(cuò)404, 當(dāng)然這是把項(xiàng)目放在二級(jí)路由的情況下, 如果是一級(jí)路由的話就可以不用加base這個(gè)屬性,?
最終效果如下。
這里就完成了vue打包到部署的流程了，希望對(duì)大家有些許的幫助吧。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)會(huì)議室拖拽布局排座功能
vue-draggable-resizable-gorkys是一更強(qiáng)大的拖拽組件,可以隨意拖拽,有點(diǎn)坐標(biāo),會(huì)議室拖拽布局排座是vue-draggable結(jié)合vue-draggable-resizable-gorkys進(jìn)行開(kāi)發(fā)的,本文重點(diǎn)給大家介紹vue實(shí)現(xiàn)會(huì)議室拖拽布局排座,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了Vue 實(shí)現(xiàn)雙向綁定的四種方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了dataV大屏在vue中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue附件下載無(wú)法打開(kāi)的問(wèn)題及解決
這篇文章主要介紹了vue附件下載無(wú)法打開(kāi)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue基于vant實(shí)現(xiàn)上拉加載下拉刷新的示例代碼
普遍存在于各種app中的上拉加載下拉刷新功能，本文主要介紹了vue基于vant實(shí)現(xiàn)上拉加載下拉刷新，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例
今天小編大家分享一篇vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
解決Vue.js Devtools未檢測(cè)到Vue實(shí)例的問(wèn)題
在開(kāi)發(fā)Vue.js應(yīng)用時(shí),Vue.js Devtools是一個(gè)不可或缺的調(diào)試工具,然而,有時(shí)我們可能會(huì)遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識(shí)別和連接到我們的Vue應(yīng)用,本文將詳細(xì)解析這個(gè)問(wèn)題,并提供相應(yīng)的解決步驟與代碼示例,需要的朋友可以參考下2024-01-01
vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本篇文章主要介紹了詳解Vue使用 vue-cli 搭建項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04