vue项目打包发布页面空白以及图片加载错误问题

在执行npm run build 之前，需要先更改配置，避免打包出来是空白的问题

找到config->index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',  //这里需要修改assetsPublicPath这个配置，因为打包的是时候资
          										//源路径会改变

    /**
     * Source Maps
     */

    productionSourceMap: false,// 关闭生产环境

这个时候我们会发现打包完之后项目中的图片路径引用不正确，找不到相应的图片路径，因此我们还需要配置build->utils

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        // 下面这个配置是改变图片引用路径的
        publicPath: '../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }