vue-cli打包后资源路径报错及样式中背景图片的引用问题

1、打包后资源路径报错

通过vue-cli生成的项目，npm run build打包后的文件部署后会报错，找不到样式文件和js文件。原因是通过webpack和vue-cli编译的路径是绝对路径，并且将static默认为根路径。

1578993472(1).jpg

解决方法：

更改config/index.js文件中，build对象下的assetsPublicPath
由

assetsPublicPath: "/",

更改为：

assetsPublicPath: "./",

则可将编译路径更改为相对路径。

2、背景图片引用路径问题

1578992115(1).jpg
样式中引入的背景图地址出现错误，被编译成url(static/img/background@3x.706610c.png);

解决方法：

找到build/utils.js，在ExtractTextPlugin.extract中添加publicPath: '../../'属性

1578992600(1).jpg

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader",
        publicPath: '../../'   // 以dist/static/css下的样式表为源点，匹配dist/static/img下的图片资源  编译结果为url(../../static/img/background@3x.706610c.png);
      });
    } else {
      return ["vue-style-loader"].concat(loaders);
    }