您好,登錄后才能下訂單哦!
這篇文章運用簡單易懂的例子給大家介紹vue項目打包時服務器顯示404錯的解決方法,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
1、使用腳手架搭建一個vue項目
2、運行,在本地運行沒問題,接著打包上服務器,遇到404的錯誤,如下
這是webpack打包的結果,解決辦法如下
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項目打包時服務器顯示404錯的解決方法就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。