Vue 设置图片不转为base64

冷不防 2022-02-28 08:04 572阅读 0赞

在使用 Vue.js 框架开发项目时，vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64。

好处：带来了更快的渲染，不会因为页面切换时还有加载图片的延迟感。

坏处：打包后的CSS，JS文件非常大，特别是图片数量多的情况下，这个问题尤为明显。

# vue-cli 3 、vue-cli 4  版本： #

修改文件：vue.config.js

源码如下

module.exports = {
        // ...
        /* 调整内联文件的大小限制，让小图片不转为base64 */
        chainWebpack: config => {
            config.module
                .rule('images')
                .use('url-loader')
                .loader('url-loader')
                .tap(options => Object.assign(options, { limit: 1 }))
        },
        // ...
    }

#  #

# vue-cli 2 版本： #

修改文件：/build/webpack.base.conf.js

修改方式，如下图所示位置，将图片和字体的 limit（限制）修改为：1（0貌似无效），修改后文件都不会再被转为base64格式了。![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220228/6d4e42f7d4a042c7a6fc4acb5a608a7f.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220228/e538f240d1ae47b19a61081022412c1e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，572人围观）

还没有评论，来说两句吧...

相关阅读

相关在Vue 中，将base64图片转为File文件类型

base64ToFile(urlData, fileName) { let arr = urlData.split(',');

- 日理万妓/ 2023年07月09日 02:04/ 0 赞/ 7 阅读

相关 matlab把图片转为base64

function [base64string,base64string_len] = base64file(file) fid = fopen(file,'rb

ゝ一世哀愁。/ 2023年02月25日 15:26/ 0 赞/ 18 阅读

相关 Node.js读取图片路径转为base64，vue前端回显图片

> 注意：Node.js 中上传图片一般是上传到项目所在目录中 `koa-static` 指定的静态资源目录下，这样可以通过路径访问。这里讲的是上传的图片不在公共目录中的情况下

待我称王封你为后i/ 2023年01月22日 15:55/ 0 赞/ 328 阅读

相关 Base64转图片和图片转Base64

<template> <view> <view class="imgtext"> <im

爱被打了一巴掌/ 2023年01月13日 09:37/ 0 赞/ 346 阅读

相关 uni-app把网络图片转为base64的

urlTobase64(img) \{ return new Promise((resolve, reject) => \{

╰+攻爆jí腚メ/ 2022年10月11日 12:20/ 0 赞/ 563 阅读

相关 BufferedImage转为base64

public Map getVerificationCode(HttpServletResponse response) { Map<Strin

本是古典何须时尚/ 2022年10月09日 00:33/ 0 赞/ 321 阅读

相关 base64转图片图片转base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

本是古典何须时尚/ 2022年06月17日 05:09/ 0 赞/ 412 阅读

相关 base64生成图片——图片转换变成base64

base64生成图片——图片转换变成base64 如题。下面上货。 package com.xueyou.demo; import org

桃扇骨/ 2022年06月15日 05:22/ 0 赞/ 449 阅读

相关 elementui把上传的图片转为base64

使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可 <el-upload action='' :on-chan

傷城~/ 2022年03月29日 12:10/ 0 赞/ 1360 阅读

相关 Vue 设置图片不转为base64

在使用 Vue.js 框架开发项目时，vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64。好处：带来了更快的渲染，不会因为页面切换时还

冷不防/ 2022年02月28日 08:04/ 0 赞/ 573 阅读