打包後圖片和背景圖片的路徑報錯

使用vue init webpack生成的vue專案模板，在開發完打包後會出現圖片路徑和背景圖片路徑錯誤的問題，解決辦法如下。

1. 修改config/index.js中的配置：

    build: {
        index: path.resolve(__dirname, '../dist/index.html'),
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static'
 
,
        assetsPublicPath: './', // 將原本模板中的'/'修改成'./'
    }

2. 修改build/utils.js，加入publicPath:'../../',

    if (options.extract) {
        return ExtractTextPlugin.extract({
            publicPath: "../../", // 加入這一行
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else
 
 {
        return ['vue-style-loader'].concat(loaders)
    }

在執行打包命令時，webpack會根據rules中每個loader限制的大小（limit）來區分檔案大小，如果超過限制，會按照option中的name重新壓縮，因此可修改limit的大小來解決。