关于webpack打包静态资源路径出错的解决方案

使用webpack打包完项目部署之后发现static中的图片资源不能正常显示。

出错代码：

xxx.vue:
<style scoped lang="less">
  .xx{
    background-image: url(../../static/image/xxx.png);
    // 打包之后路径变成了..../static/css/static/image/xxx.png
  }<style>

于是排查的快乐时光开始了。

首先看下文件目录：

--static --image --xxx.png

在本地跑服务的时候查看路径是正确的，但是打包之后发现路径不对差了两个../../，为什么会这样呢？？？最开始想到的是文件目录的问题，在打包之后css文件会被放入到static/css/中，所以这里我们写好的相对路径就变成了/static/css/static/...，可以看出css中图片的路径存在问题了，分析打包过程，css是在js中引入的或是写在vue文件中的，css文件首先被less处理，处理后会被ExtractTextPlugin处理，ExtractTextPlugin将js中的css全部抽离至app.css文件中。所以就造成了文件路径错误。

解决方法：修改build/utils.js文件中关于css的路径配置，增加publicPath: '../../'：

另外值得一提的是不仅是在css中引用静态资源打包会出错，在js中或者在template中引用也需要特别注意。

在template的img标签中src与style 一样，我们使用相对路径就行了。

但是如果使用的是:src="xxx"或者:style="{'background-image': 'url('+xxx')}"的时候就直接写成./static/...就可以了。

究其原因，webpack打包的时候引入文件位置不同。使用v-bind绑定的资源会在index.html文件目录中被引用，所以使用./static/...即可，而在css中和不使用v-bind绑定的资源会在/static/css文件目录中被引用，所以要修改css配置中的提取路径。

至此，美好时光结束。