使用rollup.js打包时，Vue组件中url()引入图片丢失如何解决？

嘿，我之前也遇到过一模一样的问题！用Rollup打包Vue组件时，CSS里用url()引入的背景图片经常会被漏掉，因为Rollup默认不会处理这类资源文件。别担心，只要配置几个插件就能搞定，下面是具体的步骤：

1. 安装必要的Rollup插件 #

首先需要安装处理Vue组件和资源文件的插件，推荐使用rollup-plugin-url（可以将图片输出到指定目录）或者@rollup/plugin-image（将小图转成base64嵌入代码），同时确保你已经安装了处理Vue的插件：

# 使用yarn安装
yarn add rollup-plugin-vue rollup-plugin-url @rollup/plugin-image -D

# 或者用npm
npm install rollup-plugin-vue rollup-plugin-url @rollup/plugin-image --save-dev

2. 配置Rollup配置文件 #

打开你的rollup.config.js，引入并配置这些插件：

方案一：使用rollup-plugin-url输出独立图片文件（适合大图） #

这个插件会将图片复制到你指定的输出目录，并自动替换CSS里的url()路径：

import vue from 'rollup-plugin-vue';
import url from 'rollup-plugin-url';

export default {
  input: 'src/your-component-entry.js', // 替换成你的组件入口文件
  output: {
    file: 'dist/your-bundle.js', // 打包后的JS文件路径
    format: 'esm' // 可根据需求选择umd、cjs等格式
  },
  plugins: [
    vue({
      css: true, // 确保Vue组件内的CSS被正确提取处理
      compileTemplate: true
    }),
    url({
      limit: 0, // 设置为0表示所有图片都输出为独立文件，不转base64；若设为1024则小于1KB的图转base64
      include: ['**/*.jpg', '**/*.png', '**/*.gif', '**/*.svg'], // 指定要处理的图片格式
      destDir: 'dist/assets/images', // 图片输出的目标目录
      publicPath: '/assets/images/' // CSS里生成的图片路径前缀，要和destDir对应
    })
  ]
};

方案二：使用@rollup/plugin-image转base64嵌入（适合小图标） #

如果你的图片都是小图标，直接转成base64嵌入代码更方便，不需要额外的图片文件：

import vue from 'rollup-plugin-vue';
import image from '@rollup/plugin-image';

export default {
  input: 'src/your-component-entry.js',
  output: {
    file: 'dist/your-bundle.js',
    format: 'esm'
  },
  plugins: [
    vue({ css: true }),
    image() // 直接添加这个插件即可，它会自动处理图片并转成base64
  ]
};

3. 验证打包结果 #

配置完成后，重新执行yarn build，你会发现：

• 用rollup-plugin-url的话，图片会出现在dist/assets/images目录下，CSS里的url('./img.jpg')会被替换成/assets/images/img.jpg（对应你设置的publicPath）
• 用@rollup/plugin-image的话，图片会被转成base64字符串直接嵌入到打包后的JS/CSS中，不会生成单独的图片文件

额外注意点 #

• 如果你使用的是Vue 3，确保rollup-plugin-vue的版本是v6.x及以上，它才支持Vue 3的语法
• 组件内的图片相对路径要正确，比如./img.jpg是相对于当前Vue组件文件的位置
• 如果你的项目有其他资源文件（比如字体），也可以通过rollup-plugin-url的include参数添加对应的格式来处理

内容的提问来源于stack exchange，提问作者user13602195