這篇文章主要介紹如何解決vue項目打包后提示圖片文件路徑錯誤的問題，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)服務(wù)熱線：13518219792，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)網(wǎng)頁制作領(lǐng)域十余年，包括成都OPP膠袋等多個行業(yè)擁有多年建站經(jīng)驗，選擇成都創(chuàng)新互聯(lián)，為企業(yè)保駕護航！

vue項目打包后在production模式下提示圖片 ‘404（not found），在dev環(huán)境下好好的，打包了就提示這個錯誤。這是為什么呢，以前第一次使用vue-cli構(gòu)建項目的的時候只有兩個圖片文件，當(dāng)時部署后報錯路徑問題， 當(dāng)時的想法就是簡單粗暴，直接在build好的文件修改了文件路徑，再后來項目中遇到了一大堆靜態(tài)資源，修改路徑顯然是不行的，看了一下生成文件大概知道是文件目錄改變了，所以引用的路徑也要隨之改變，網(wǎng)上最簡單的方法是修改 ‘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)路徑改為‘./'，即相對路徑。 ok了？

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

這樣第三種方法應(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)
  }
 }

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

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

以上是“如何解決vue項目打包后提示圖片文件路徑錯誤的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：如何解決vue項目打包后提示圖片文件路徑錯誤的問題
標(biāo)題來源：http://chinadenli.net/article2/gdoooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、全網(wǎng)營銷推廣、云服務(wù)器、微信小程序、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)