美文网首页
针对vue3 压缩图片的处理

针对vue3 压缩图片的处理

作者: JackyLF | 来源:发表于2021-09-22 16:58 被阅读0次

    安装image-webpack-loader插件

    1、如果先前尝试使用 yarn 或 npm 安装过,一定要先卸载掉,然后用 cnpm 安装

    yarn remove image-webpack-loader // npm uninstall image-webpack-loader

    2、使用 cnpm 安装 image-webpack-loader 会发现很快就安装好了

    cnpm install --save-dev image-webpack-loader

    注:如果先前尝试使用 yarn 或 npm 安装过,一定要先卸载掉用 cnpm 安装

    在vue.config.js当中进行配置

       chainWebpack: config => {
        const imagesRule = config.module.rule('images')
        imagesRule
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    }
    

    然后进行打包,图片的压缩最高可达60%以上。

    如果在nuxt项目直接下载 image-webpack-loader即可,不用进行配置,也能达到效果。

    相关文章

      网友评论

          本文标题:针对vue3 压缩图片的处理

          本文链接:https://www.haomeiwen.com/subject/hjkggltx.html