解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒(méi)出錯(cuò)的問(wèn)題
1、使用腳手架搭建一個(gè)vue項(xiàng)目
2、運(yùn)行，在本地運(yùn)行沒(méi)問(wè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ù)的問(wèn)題
為什么我們?cè)陂_(kāi)發(fā)vue項(xiàng)目的時(shí)候需要配置反向代理，原因是因?yàn)槲覀儽镜亻_(kāi)發(fā)的時(shí)候會(huì)出現(xiàn)跨域的問(wèn)題，
這個(gè)時(shí)候就需要反向代理來(lái)幫我們處理跨域的問(wèn)題，但是有些開(kāi)發(fā)者在開(kāi)發(fā)完項(xiàng)目的時(shí)候，會(huì)直接打包，
直接打包的話就會(huì)出現(xiàn)問(wèn)題，請(qǐng)求不到數(shù)據(jù)，是因?yàn)槲覀兇虬蟮捻?xiàng)目根本就不會(huì)出現(xiàn)跨域了，因?yàn)槲覀冊(cè)陂_(kāi)發(fā)的時(shí)候走的是本地8080端口，所有才有跨域，
打包完之后不用走本地端口所有就不會(huì)出現(xiàn)跨域了，所以我們?cè)诖虬耙劝盐覀兊姆聪虼斫o注釋掉，這樣才不會(huì)出現(xiàn)數(shù)據(jù)請(qǐng)求出錯(cuò)的問(wèn)題。
以上這篇解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒(méi)出錯(cuò)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了關(guān)于vue3中setup函數(shù)的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇基于element-ui的rules中正則表達(dá)式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue實(shí)現(xiàn)根據(jù)hash高亮選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)根據(jù)hash高亮選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對(duì)應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對(duì)應(yīng)變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue-admin-template模板添加tagsview的實(shí)現(xiàn)
本文主要介紹了vue-admin-template模板添加tagsview的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
關(guān)于vue-property-decorator的基礎(chǔ)使用實(shí)踐
這篇文章主要介紹了關(guān)于vue-property-decorator的基礎(chǔ)使用實(shí)踐，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
VUE使用day.js顯示時(shí)分秒并實(shí)時(shí)更新時(shí)間效果實(shí)例
vue.js是目前比較流行的前端框架之一,它提供了非常多的基礎(chǔ)組件和工具庫(kù),以方便開(kāi)發(fā)者快速搭建具有可重用性的web應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于VUE使用day.js顯示時(shí)分秒并實(shí)時(shí)更新時(shí)間效果的相關(guān)資料,需要的朋友可以參考下2024-04-04
VUE項(xiàng)目中引入vue-router的詳細(xì)過(guò)程
vue-router 也叫 vue 路由，根據(jù)不同的路徑，來(lái)執(zhí)行不同的組件，這篇文章主要介紹了VUE項(xiàng)目中引入vue-router,需要的朋友可以參考下2023-05-05
本文給大家詳細(xì)介紹了Mac下安裝vue的方法，本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-04-04
vue+elementui+vuex+sessionStorage實(shí)現(xiàn)歷史標(biāo)簽菜單的示例代碼
本文主要介紹了vue+elementui+vuex+sessionStorage實(shí)現(xiàn)歷史標(biāo)簽菜單的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12