vue.js打包項目后頁面出現(xiàn)空白的解決辦法
相信很多剛剛接觸vue的伙伴會遇到這樣的問題,就是說vue項目在開發(fā)環(huán)境下一切正常,但是打包之后,打開index.html頁面卻是一片空白,打開控制臺發(fā)現(xiàn)這樣的錯誤
出現(xiàn)這種情況要分兩個處理方式(vue-cli2和vue-cli3),先說vue-cli2; 首先找到config/index.js文件,將assetPublicPath的路徑改為“./”即可,
vue-cli3的話要稍微麻煩些,因為vue-cli3簡潔了許多,沒有了配置文件,所以需要自己創(chuàng)建,只能在項目的根目錄下創(chuàng)建,并且文件的名字只能是vue.config.js,然后在這個文件里面加上下面的代碼即可
module.exports = { assetsDir: 'static', parallel: false, publicPath: './', }
到了這步本來就可以了,但是有的小伙伴還是沒有顯示出來,那是因為你的路由模式的關系,你把你的路由模式改成“hash”就行了,雖然有點丑陋,但是至少功能出來了,如果你不想使用“hash”模式,非要用歷史模式的話,本地是不行的,必須要服務器配合,這里就說下怎么使用nginx配合vue使用歷史模式
安裝nginx就不說了 ,假設你已經(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是你文件真實存放的路徑,index指的就是你的入口文件,你的文件名如果不是index.html的話就替換成你的入口文件的名字,這里面最重要的是 try_files $uri $uri/ /aaa/index.html 這句話,這句話主要就是用來處理vue的歷史模式的,在配置完nginx后, 還要在項目里面加點東西, 其實也很簡單, 就在項目的src目錄里面加上
在config/index.js里面加上
就可以了, 不然的話刷新頁面就會報錯404, 當然這是把項目放在二級路由的情況下, 如果是一級路由的話就可以不用加base這個屬性,?
最終效果如下。
這里就完成了vue打包到部署的流程了,希望對大家有些許的幫助吧。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實用技巧
uni-app基于VUE開發(fā),通常組件的使用都是先安裝,然后全局或者局部引入,注冊,今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實用技巧,需要的朋友一起看看吧2021-08-08Vue router的addRoute方法實現(xiàn)控制權限方法詳解
這篇文章主要介紹了vue動態(tài)路由添加,vue-router的addRoute方法實現(xiàn)權限控制流程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2022-09-09使用vue-cli創(chuàng)建項目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項目基于webpack模板打包的配置方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-07-07前端Vue.js實現(xiàn)json數(shù)據(jù)導出到doc
這篇文章主要介紹了前端Vue.js實現(xiàn)json數(shù)據(jù)導出到doc,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-09-09vant(ZanUi)結合async-validator實現(xiàn)表單驗證的方法
這篇文章主要介紹了vant(ZanUi)結合async-validator實現(xiàn)表單驗證的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12VueJs監(jiān)聽window.resize方法示例
本篇文章主要介紹了VueJs監(jiān)聽window.resize方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01vue?使用mescroll.js框架實現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實現(xiàn)下拉加載和上拉刷新功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07