解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒出錯(cuò)的問題
1、使用腳手架搭建一個(gè)vue項(xiàng)目
2、運(yùn)行，在本地運(yùn)行沒問題，接著打包上服務(wù)器，遇到404的錯(cuò)誤，如下
這是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,
接著重新打包~
補(bǔ)充知識(shí)：vue項(xiàng)目打包后請(qǐng)求不到數(shù)據(jù)的問題
為什么我們?cè)陂_發(fā)vue項(xiàng)目的時(shí)候需要配置反向代理，原因是因?yàn)槲覀儽镜亻_發(fā)的時(shí)候會(huì)出現(xiàn)跨域的問題，
這個(gè)時(shí)候就需要反向代理來幫我們處理跨域的問題，但是有些開發(fā)者在開發(fā)完項(xiàng)目的時(shí)候，會(huì)直接打包，
直接打包的話就會(huì)出現(xiàn)問題，請(qǐng)求不到數(shù)據(jù)，是因?yàn)槲覀兇虬蟮捻?xiàng)目根本就不會(huì)出現(xiàn)跨域了，因?yàn)槲覀冊(cè)陂_發(fā)的時(shí)候走的是本地8080端口，所有才有跨域，
打包完之后不用走本地端口所有就不會(huì)出現(xiàn)跨域了，所以我們?cè)诖虬耙劝盐覀兊姆聪虼斫o注釋掉，這樣才不會(huì)出現(xiàn)數(shù)據(jù)請(qǐng)求出錯(cuò)的問題。
以上這篇解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒出錯(cuò)的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue $emit()不能觸發(fā)父組件方法的原因及解決
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
這篇文章主要介為大家詳細(xì)紹了vue實(shí)現(xiàn)微信分享功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
vue實(shí)現(xiàn)選項(xiàng)卡及選項(xiàng)卡切換效果
這篇文章主要介紹了vue實(shí)現(xiàn)選項(xiàng)卡選項(xiàng)卡切換效果,這里的Vue以單文件的形式引入，另外代碼在實(shí)現(xiàn)上會(huì)一步步的進(jìn)行優(yōu)化。需要的朋友可以參考下2018-04-04
本文給大家分享了VUE制作點(diǎn)擊按鈕出現(xiàn)水波紋效果的組件過程，對(duì)此有需求的朋友可以跟著學(xué)習(xí)下。2018-04-04
Vue下載Excel后報(bào)錯(cuò),或打不開的解決
這篇文章主要介紹了Vue下載Excel后報(bào)錯(cuò),或打不開的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue2.x?el-table二次封裝實(shí)現(xiàn)編輯修改
本文主要介紹了vue2.x?el-table二次封裝實(shí)現(xiàn)編輯修改，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue中如何使用math.js問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue如何清除地址欄參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04