项目打包后路径错误导致404。

主要原因：

webpack打包以后，在dist文件中生成一个static的目录和一个index.html，会默认把图片路径改为'static/img'，这样的路径错误的取不到图片。

// 代码是没问题的在页面中正常显示
.page-content .my {
    width: 100%;
    .h(130);
    .lh(130);
    background: url("~@/assets/images/personnel/lc-bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    .mb(44);
}

打包后的页面在dist文件中：

打包后的dist.jpg

打包后的错误路径：

url错误.jpg

解决办法：

在 build/utils.js 文件中添加publicPath: '../../'，重新打包上传到服务器，再运行图片就出现了

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

解决路径出错的办法.png

修改之后图片就出来了

修改utils.js文件之后.jpg