前端vue2 gif转base64配置

前言

在vue2项目中将项目打包到npm上，下载下来发现gif图片无法加载，在网上找了方法，需要将gif转为base64进行打包配置，这种方法能将图片直接打到项目代码里，不会将文件暴露在项目包中，在配置中注意下vue-cli是4还是5版本，这两种写法不同

vue.config.js配置

vue-cli.4x版本

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
    devServer: {
        port: 3000,//设置端口
    },
    lintOnSave: false,//热更新
    transpileDependencies: true,// 是否将所有文件都编译一遍（通过 babel 编译文件：ES6+ → ES5）
    productionSourceMap: false,// 不打包
    css: { extract: false },
    chainWebpack: config => {
        config.module
            .rule('images')
            .test(/.(jpg|png|gif)$/)
            .tap(options => Object.assign(options, { limit: 1024 * 1024 })); // 1M
        })
    }
});

vue-cli.5x版本

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  devServer: {
    port: 3000,//设置端口
  },
  lintOnSave: false,//热更新
  transpileDependencies: true,// 是否将所有文件都编译一遍（通过 babel 编译文件：ES6+ → ES5）
  productionSourceMap: false,// 不打包
  css: { extract: false },
  chainWebpack: config => {
    config.module
    .rule('images')
      .test(/.(jpg|png|gif)$/)
      .set('parser', {
        dataUrlCondition: {
          maxSize:1024 * 1024 // 1M
        }
      })
 }
});

结语

如果你觉得此文对你有一丁点帮助，麻烦点个赞哈，谢谢大家。