使用 vue-cli 开发中, 经常会用到 CSS 引用背景图片, 在开发环境下背景图片都能好好的加载, 但是打包后重新访问 index.html, 结果提示背景图片就是找不到资源
css 代码
注意: 此处的图片与 index 文件在同一个目录下;
在开发环境下背景图片是可以好好的显示的, 但是打包后提示找不到资源, 报错:
当时第一反应是 config/index.js 中的 assetsPublicPath 忘记配置了 要将绝对路径改成相对路径
配置如下:
但实际不是这个原因导致的
解决这个问题的方法有两种: 暴力的和柔和的
(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 一次, 问题解决了
来源: http://www.qdfuns.com/article/21482/aa86fee0591dad2ba383fa9eaa875a83.html