解決vue項目打包后提示圖片文件路徑錯誤的問題

vue項目打包后在production模式下提示圖片 ‘404（not found），在dev環境下好好的，打包了就提示這個錯誤。這是為什么呢，以前第一次使用vue-cli構建項目的的時候只有兩個圖片文件，當時部署后報錯路徑問題， 當時的想法就是簡單粗暴，直接在build好的文件修改了文件路徑，再后來項目中遇到了一大堆靜態資源，修改路徑顯然是不行的，看了一下生成文件大概知道是文件目錄改變了，所以引用的路徑也要隨之改變，網上最簡單的方法是修改 ‘config/index.js'文件中的 build模塊：

// emplate for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './', 

       將默認的改為上文這樣子，靜態文件目錄改為static，靜態路徑改為‘./'，即相對路徑。 ok了？

 試了一下還是有404，當時想到的就是難道只能在組件data中以“require”的方式一個一個的引入了嗎？ 這個屬于js中以模塊引入方式確實可行，但是太繁瑣，想一下，使用這張圖的時候在html文檔結構中以 “:bind”的方式將資源以code的方式加在html文檔中，不是說這樣不行，這樣也是可以實現想要的效果的，但是這樣做會導致不僅文檔結構不清晰，冗余度高，維護起來麻煩，而且資源很多的時候這是一項龐大且繁瑣的工作，徒增加無用功。

這樣第三種方法應用而生，就是修改‘build'目錄下的utils.js文件，將文件中的“generateLoaders”函數改為：

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)
 }
 }

重點是if…else判斷中的那個”publicPath:'../../' ”

build一下，部署在服務端，ok可行，這樣就可以愉快的在style中使用圖片資源了。

總結

以上所述是小編給大家介紹的解決vue項目打包后提示圖片文件路徑錯誤的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com