介绍
在使用vue cli4的过程中,我们遇到比较小的图片被转成了base64格式的编码。但实际使用的时候不需要,因为转码后的图片不够清晰,特别是在大屏和高分辨率的显示器时尤甚。
参考文献:vue.config.js配置参考
功能
- 避免vue cli4图片转码
步骤
在项目根目录中新建vue.config.js文件
vue.config.js文件内容
var path = require('path'); //必须引入path 否则报错
module.exports = {
chainWebpack: config => {
//设置图片不转base64格式 图片少 且对图片质量要求高
const imagesRule = config.module.rule('images');
imagesRule.uses.clear() //清除原本的images loader配置
imagesRule
.test(/\.(jpg|gif|png|svg)$/)
.exclude
.add(path.join(__dirname,"../node_modules")) //去除node_modules里的图片转base64配置
.end()
.use('url-loader')
.loader('url-loader')
.options({name:"img/[name].[hash:8].[ext]",limit: 1})
},
}