vue打包中的问题（一）

打包后图片和背景图片的路径报错

使用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的大小来解决。