解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問(wèn)題
vue項(xiàng)目打包后在production模式下提示圖片 ‘404(not found),在dev環(huán)境下好好的,打包了就提示這個(gè)錯(cuò)誤。這是為什么呢,以前第一次使用vue-cli構(gòu)建項(xiàng)目的的時(shí)候只有兩個(gè)圖片文件,當(dāng)時(shí)部署后報(bào)錯(cuò)路徑問(wèn)題, 當(dāng)時(shí)的想法就是簡(jiǎn)單粗暴,直接在build好的文件修改了文件路徑,再后來(lái)項(xiàng)目中遇到了一大堆靜態(tài)資源,修改路徑顯然是不行的,看了一下生成文件大概知道是文件目錄改變了,所以引用的路徑也要隨之改變,網(wǎng)上最簡(jiǎn)單的方法是修改 ‘config/index.js'文件中的 build模塊:
// emplate for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',
將默認(rèn)的改為上文這樣子,靜態(tài)文件目錄改為static,靜態(tài)路徑改為‘./',即相對(duì)路徑。 ok了?
試了一下還是有404,當(dāng)時(shí)想到的就是難道只能在組件data中以“require”的方式一個(gè)一個(gè)的引入了嗎? 這個(gè)屬于js中以模塊引入方式確實(shí)可行,但是太繁瑣,想一下,使用這張圖的時(shí)候在html文檔結(jié)構(gòu)中以 “:bind”的方式將資源以code的方式加在html文檔中,不是說(shuō)這樣不行,這樣也是可以實(shí)現(xiàn)想要的效果的,但是這樣做會(huì)導(dǎo)致不僅文檔結(jié)構(gòu)不清晰,冗余度高,維護(hù)起來(lái)麻煩,而且資源很多的時(shí)候這是一項(xiàng)龐大且繁瑣的工作,徒增加無(wú)用功。
這樣第三種方法應(yīng)用而生,就是修改‘build'目錄下的utils.js文件,將文件中的“generateLoaders”函數(shù)改為:
pluginfunction generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' //add }) } else { return ['vue-style-loader'].concat(loaders) } }
重點(diǎn)是if…else判斷中的那個(gè)”publicPath:'../../' ”
build一下,部署在服務(wù)端,ok可行,這樣就可以愉快的在style中使用圖片資源了。
總結(jié)
以上所述是小編給大家介紹的解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07vue中實(shí)現(xiàn)一個(gè)項(xiàng)目里兼容移動(dòng)端和pc端
這篇文章主要介紹了vue中實(shí)現(xiàn)一個(gè)項(xiàng)目里兼容移動(dòng)端和pc端問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue里使用create,mounted調(diào)用方法的正確姿勢(shì)說(shuō)明
這篇文章主要介紹了vue里使用create,mounted調(diào)用方法的正確姿勢(shì),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue-cli3使用mock數(shù)據(jù)的方法分析
這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了vue-cli3使用mock數(shù)據(jù)的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決
這篇文章主要介紹了開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09