91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

webpack配置打包后圖片路徑出錯怎么辦

發布時間:2021-07-12 13:51:03 來源:億速云 閱讀:510 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關webpack配置打包后圖片路徑出錯怎么辦,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

問題

項目在開發環境下工作正常,當打包后圖片不見了,檢查元素后發現路徑出錯了。

圖片路徑是這樣:background: url(/static/img/bg_camera_tip.bd37151.png),但該路徑下文件并不存在。

打包后文件目錄如下:

webpack配置打包后圖片路徑出錯怎么辦

可以看到背景圖片的路徑應該是../../static而實際卻是/static,找到原因后就好解決了

方法一

查看build目錄下webpack.base.conf.js的配置,圖片文件會經過url-loader處理。

 module: {
  rules: [
   ...
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   ...
  ]
 }

它的作用是當文件大小小于limit限制時會返回一個base64串,其實就是把圖片資源編碼為base64串放在CSS文件里,這樣就可以減少一次網絡請求,因為每一張圖片都是需要從服務端去下載的。但是如果文件太大了就會導致base64串很長,那放在CSS文件里面就會導致文件很大,CSS的文件下載時間變長,就得不償失了,所以會有一個limit參數,在這個范圍內的才會被轉成base64串,它的單位是字節。對于這個問題,該loader還提供了一個publicPath參數,目的是修改引用的圖片地址,默認是當前路徑,那直接改它就可以了,即在options節點下添加一個參數publicPath: '../../'。

 module: {
  rules: [
   ...
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     publicPath: '../../', //你實際項目的引用地址前綴
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   ...
  ]
 }

方法二

webpack.base.conf.js里還有一條規則,每一個vue文件都會經過vueLoaderConfig處理

 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   ...
  ]
 }

vueLoaderConfig位于build/vue-loader.conf.js,它又調用了build/utils.js的cssLoaders的方法。

  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  }

如果是生產環境options.extract值為true,會調用這個ExtractTextPlugin插件做處理,它的作用是抽離項目中引用的樣式文件到一個獨立的CSS文件中,這樣就可以一次加載所有的CSS文件,相當于CSS文件并行加載,可以減少網絡請求次數,更多優點及使用可以查看ExtractTextWebpackPlugin。回到這個問題,它還有一個參數就是publicPath,可以覆蓋所指定的loader的publicPath配置,那么就跟前面的配置一樣,可以給所有的loader統一配置引用文件的路徑地址。

另外這里的user:loader實際上是返回一系列的loader的集合,cssLoaders的返回是

 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

這也就是即便你沒有在webpack.base.conf.js中配置sass-loader也能使用SASS語法的原因。

關于“webpack配置打包后圖片路徑出錯怎么辦”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

屏山县| 奎屯市| 环江| 沁水县| 乐陵市| 商河县| 鄂伦春自治旗| 岳普湖县| 舟山市| 五指山市| 阳谷县| 定远县| 阳原县| 商丘市| 阆中市| 西乌珠穆沁旗| 阳西县| 扶风县| 荃湾区| 潮州市| 徐闻县| 仁怀市| 夹江县| 神木县| 大英县| 平南县| 宁陵县| 鄂托克旗| 尚志市| 申扎县| 武义县| 武强县| 天长市| 汾西县| 高陵县| 高台县| 济南市| 读书| 桂阳县| 鄂尔多斯市| 许昌县|