解決vue項目打包上服務(wù)器顯示404錯誤,本地沒出錯的問題
1、使用腳手架搭建一個vue項目
2、運行,在本地運行沒問題,接著打包上服務(wù)器,遇到404的錯誤,如下
這是webpack打包的結(jié)果,解決辦法如下
1、修改build文件夾下的utils.js文件,大約在51行添加
publicPath:"../../" if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:"../../" }) } else { return ['vue-style-loader'].concat(loaders) } }
2、修改config下index.js文件
cssSourceMap: true 改為 cssSourceMap: false productionSourceMap: true 改為 productionSourceMap: false, productionGzip: true, 改為 productionGzip: false,
接著重新打包~
補充知識:vue項目打包后請求不到數(shù)據(jù)的問題
為什么我們在開發(fā)vue項目的時候需要配置反向代理,原因是因為我們本地開發(fā)的時候會出現(xiàn)跨域的問題,
這個時候就需要反向代理來幫我們處理跨域的問題,但是有些開發(fā)者在開發(fā)完項目的時候,會直接打包,
直接打包的話就會出現(xiàn)問題,請求不到數(shù)據(jù),是因為我們打包后的項目根本就不會出現(xiàn)跨域了,因為我們在開發(fā)的時候走的是本地8080端口,所有才有跨域,
打包完之后不用走本地端口所有就不會出現(xiàn)跨域了,所以我們在打包之前要先把我們的反向代理給注釋掉,這樣才不會出現(xiàn)數(shù)據(jù)請求出錯的問題。
以上這篇解決vue項目打包上服務(wù)器顯示404錯誤,本地沒出錯的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue $emit()不能觸發(fā)父組件方法的原因及解決
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié),非常具有實用價值,需要的朋友可以參考下2017-06-06vue2.x?el-table二次封裝實現(xiàn)編輯修改
本文主要介紹了vue2.x?el-table二次封裝實現(xiàn)編輯修改,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue項目中自定義video視頻控制條的實現(xiàn)代碼
這篇文章主要介紹了vue項目中自定義video視頻控制條的實現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04