vue-cli脚手架打包静态资源请求出错的原因与解决

使用vue-cli2脚手架生成的默认打包配置文件，可以看出，上面的静态资源访问路径是不正确的，我们正确的请求路径应该是可以看出导致资源加载失败的原因是路径错误，我们可以移步看看index.html文件，可以看出引入的css和js都是使用的绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。我们经常这样引用一个img图片但是打包后看到这个图片的引用地址是这样的。可以看出css中图片的路径存在问题了，分析打包过程，css是在js中引入的或是写在vue文件中的，css文件首先被less，postcss等处理，处理后会被ExtractTextPlugin处理，ExtractTextPlugin将js中的css全部抽离至app.css文件中。