vue静态资源打包中的坑与解决方案

1、问题
vue 经过 npm run build 打包后生成的css文件引入的静态文件（我的项目中是引入了字体文件）路径错误问题。

2、分析
查看项目中字体文件的引入路径为http://192.168.120.37/lx_form/static/css/static/fonts/element-icons.535877f.woff
而项目中的资源路径如下

index.html
static/
 |--js/
  |--*.js
 |--css/
  |--*.css
 |--fonts/
  |--*.woff
  |--*.ttf

对比项目中的资源路径，很明显字体文件引入的路径有误，分析后可以知道，字体文件的引入路径多了两层"/static/css"的目录。

因为打包配置的assetsPublicPath是"./"，即静态资源使用的是相对路径，所以css目录下的css文件引入的字体文件的路径应该为相对于项目根目录的static/fonts/element-icons.535877f.woff，经查看，确实如此。

那么css文件路径有问题，猜测是打包过程中资源路径没有配置好，分析打包过程，css是在js中引入的或是写在.vue文件中的，css文件首先被less，postcss等css预处理器处理，处理后被ExtractTextPlugin插件处理，ExtractTextPlugin插件将js中或.vue文件中的css全部抽离至app.css文件中。

因为字体文件的引入路径多了两层"/static/css"的目录，所以在抽离app.css文件时，css文件中引用的路径是相对于app.css目录的static/fonts/element-icons