1.问题及解决原因
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.
查看控制台也没有报错。
错误原因是Webpack打包之后,在webpack.base.conf.js中会有图片大小限制配置
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {// limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}
我们这里将limit注掉之后,重新打包,图片便可以显示。
2.发生此问题的原因
Webpack进行图片打包时,需要使用url-loader加载器(基本上创建项目之后都会有,没有的话需要进行安装),这个加载器中会有limit设置选项,如小于limit的设置值,则打包的时候会生成base64位的图片地址,超过了之后,会生成一个静态的图片文件,保存在img中。注掉之后就所有的图片都会以base64位的地址显示。
参考文档/weixin_45748460/article/details/104957626
原先只是知道了去掉limit属性之后可以使用,看了这个作者写的之后才明白原因,一个主做后端,没事学习学习前端的小白,有问题希望大佬指正。