如何让Vite将依赖包中的静态资源复制到输出目录？

1. 修复开发环境的路径异常 #

在Vite配置文件（vite.config.js/vite.config.ts）中添加以下配置，让Vite允许访问单体仓库中@stuff/common包的文件，避免依赖资源被转成本地绝对路径：

export default defineConfig({
  server: {
    fs: {
      // 允许Vite访问@stuff/common所在的目录，替换为你的实际路径
      allow: ['../common'],
    },
  },
  optimizeDeps: {
    // 排除@stuff/common，避免Vite预构建时篡改路径
    exclude: ['@stuff/common'],
  },
})

2. 构建时自动复制依赖图片到public目录 #

使用vite-plugin-static-copy插件实现资源批量复制：

• 先安装插件：

npm install vite-plugin-static-copy --save-dev
# 或使用yarn
yarn add vite-plugin-static-copy -D

• 在Vite配置中添加插件配置，指定资源源路径和目标路径：

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  // ...其他配置
  plugins: [
    viteStaticCopy({
      targets: [
        {
          // 源路径：@stuff/common/dist下的所有图片文件，替换为实际路径
          src: '../common/dist/*.{png,jpg,jpeg,svg}',
          // 目标路径：构建后的public子目录，可自定义
          dest: 'assets/common',
        },
      ],
    }),
  ],
})

3. 调整@stuff/common包的图片路径输出（核心步骤） #

如果有权限修改@stuff/common的构建配置，需让其输出的JS文件中，图片导入路径为相对路径或匹配最终public目录的路径：

• 以Rollup为例，使用@rollup/plugin-image时的配置示例：

import image from '@rollup/plugin-image'

export default {
  plugins: [
    image({
      // 图片输出到包内的dist/assets目录
      destDir: 'dist/assets',
      // 让JS生成相对路径的导入地址
      publicPath: './assets/',
    }),
  ],
}

这样@stuff/common的dist包中，JS的图片路径会是相对路径，Vite构建时能正确解析，配合静态复制插件，图片会被同步到Vite项目的构建目录，运行时可正常加载。

4. 验证配置效果 #

• 启动开发环境，检查图片是否正常加载，路径不再是/@fs开头的本地绝对路径。
• 执行npm run build，查看dist/public/assets/common目录下是否存在复制的图片，同时确认构建后的JS文件中，图片路径指向正确的资源地址。

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