vue-cli打包时css引用图片路径不对

原创 腥腻 随笔 随笔 556阅读 2018-02-07 10:33:32 举报

使用vue-cli开发中,经常会用到css引用背景图片,在开发环境下背景图片都能好好的加载,但是打包后重新访问index.html,结果提示背景图片就是找不到资源。
css 代码

注意:此处的图片与index文件在同一个目录下;

在开发环境下背景图片是可以好好的显示的,但是打包后提示找不到资源,报错:

vue-cli打包时css引用图片路径不对

当时第一反应是config/index.js 中的 assetsPublicPath 忘记配置了 要将绝对路径改成相对路径
配置如下:

vue-cli打包时css引用图片路径不对

但实际不是这个原因导致的。
解决这个问题的方法有两种:暴力的和柔和的
(1)开始使用暴力的方法,在配置文件(webpack.base.conf.js)中设置limit参数
javascript 代码

imit参数,代表如果图片小于大约10k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录,这里如果将limit值设置很大的话,页面上所有的图片都会压缩成base64的图片,这样的话就不会涉及到路径的问题,当然这种暴力的方法会给浏览器带来很大的压力。
(2)现在说说柔和的方法,稍微查一下原因就应该知道,css引入图片再打包后,style-loader无法设置自己的publicPath,所以只要改变style-loader中的publicPath即可,一行代码即可以搞定,找到build/util.js文件中ExtractTextPlugin的css路径,手动添加publicPath参数,
javascript 代码

重新npm run build一次,问题解决了

评论 ( 1 )
最新评论
林岑影 2018-02-22 14:17:00 1F

事实上就是assetsPublicPath的配置造成的