VUE使用webpack打包后，圖片超過webpack.config.js里面設(shè)置的限制值時(shí)不顯示

先貼上webpak.base.config.js關(guān)于圖片的代碼

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

小于10k的圖片都形成了base64碼正常顯示
但是超過的顯示不了，css屬性為這樣

完整路徑為這樣

config.index.js的代碼如下


 build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },

如果將上面的assetsPublicPath按照部分網(wǎng)上的更改為'/'的話則所有打包后的引用路徑為這樣
file:///D:/static/js/app.77e13a999be27db608eb.js
就沒有在項(xiàng)目目錄下
css寫在VUE文件里，圖片文件放在src的平級(jí)目錄static里

回答

編輯回答

孤影

圖片不顯示無非就兩種情況：一種是資源找不到，一種是樣式問題，其中樣式有可能是圖片無高寬、層疊過低被覆蓋等等！不過也有種奇葩情況，就是圖片資源剛剛大于limit值一點(diǎn)點(diǎn)，如果該圖片多個(gè)地方使用，會(huì)出現(xiàn)有些地方也會(huì)打包成base64，有些地方不會(huì)，那不會(huì)的地方就不會(huì)顯示，我們公司項(xiàng)目就遇到了這種奇葩情況。這說明limit也會(huì)有微小誤差的。
疑惑：
圖片打包完引用路徑不應(yīng)該以‘/’開頭嗎？您這邊是相對(duì)路徑，在css文件中應(yīng)該是找不到的。我這邊打包路徑是這樣的：

是以‘/’開頭的。

腳手架：index.js有設(shè)置圖片打包路徑的。

只要

我的個(gè)人服務(wù)器結(jié)果展示：

疑惑點(diǎn)：開發(fā)用的靜態(tài)資源為什么放在這里面

這里面是靜態(tài)資源，不需要版本管理的，腳手架直接copy的，具體進(jìn)入webpack.prod.conf.js看看：

將您用于開發(fā)的靜態(tài)資源移入src/assets下面

2017年8月2日 06:37

編輯回答