webpack打包静态资源遇到的问题
在使用vue项目的时候,如果遇到图片大于10KB的图片时,在本地开发环境没有问题,但当打包到服务器上时,就会发现assets下大于10KB的图片找不到了,查找图片读取的路径,发现图片路径多了一层/static/css,而小于10KB的图片会被编译成base64的代码。所以不存在引用路径的问题。再查看其它项目,大于10KB的图片一样能被正确引用,查看打包后的文件发现其它项目没有独立打包出来的CSS文件,CSS代码全打包到了JS中。
在网上查询后,终于发现问题所在,css是被JS引入或者写在vue中的,css文件首先会被less,postcss处理,然后再被ExtractTextPlugin处理,ExtractTextPlugin将JS中的css全部抽离到app.css文件中,首先将options.extract设为false,关闭抽离css功能,这样就可以将css代码打包到JS中,不会产生CSS引用图片路径出错的问题了,现在的问题就确定是ExtractTextPlugin抽离CSS文件时没有转换资源引入路径,通过查询资料得知,可以通过添加publicPath:"../../"解决该问题。该配置在vue项目build下的utils中。
也有人说通过将webpack中assetsPublicPath写为服务器上的绝对路径,但是这种方法太过繁琐,也不够优雅,没有从根本上解决这个问题。一般来说,assetsPublicPath写为'./'相对路径就好了。就能正确引用打包出来的js和css文件了。
文章参考:http://www.jb51.net/article/134448.htm