Rollup-plugin-img未将SVG图片复制到dist文件夹，求排查方案

云原生阿岚

2026-8-21

问题排查与解决步骤

修复配置文件语法错误
你的Rollup配置中plugins数组末尾存在无效代码：],-player'],，这会导致配置解析失败，直接删除该部分，修正后的插件数组如下：

plugins: [
  resolve(),
  commonjs(),
  image({
    limit: 1000000,
    output: 'dist/assets',
    extensions: /\.(png|jpg|jpeg|gif|svg)$/,
  }),
  typescript({ tsconfig: "./tsconfig.json" }),
  json(),
  scss(),
  livereload(),
],

修正SVG导入方式
rollup-plugin-img对图片资源采用默认导出，而非命名导出的image。你当前的导入写法import {image} from './assets/img/image.svg'无法被插件正确识别，需改为默认导入：
```
import image from './assets/img/image.svg';
```
核对文件实际路径
你说明图片存储在component/assets/image.svg，但导入路径是./assets/img/image.svg，多了一层img子目录，需确认实际文件路径与导入路径完全匹配，避免因路径错误导致插件无法定位文件。
调整limit参数控制资源输出方式
你设置的limit: 1000000（1MB）意味着，若SVG文件体积小于1MB，插件会将其转为base64内嵌到代码中，不会生成物理文件到dist/assets。如果需要强制将所有SVG复制到dist目录，将limit设为0即可：
```
image({
  limit: 0, // 所有图片均输出为物理文件，不内嵌
  output: 'dist/assets',
  extensions: /\.(png|jpg|jpeg|gif|svg)$/,
}),
```
确认插件执行顺序
确保image插件在typescript插件之前执行（当前你的配置顺序符合要求），Rollup插件按数组顺序处理，需先让资源插件识别图片导入，再由TypeScript处理代码与类型转换。