Vite配置JSON文件输出至animations目录失败及插件报错问题

1. 移除多余的@rollup/plugin-json插件 #

Vite默认已经内置了JSON文件的解析能力，手动引入@rollup/plugin-json会和内置逻辑冲突，导致JSON文件被重复解析，从而抛出[plugin:json] Could not parse JSON file错误。直接删除该插件的引入和配置即可解决报错问题。

2. 配置资源分类输出规则 #

要实现JSON文件输出到assets/animations/，其他资源分类到对应子目录，通过build.rollupOptions.output.assetFileNames的回调函数，根据文件类型匹配分配输出路径即可。

完整配置示例 #

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 针对静态资源（JSON、图片、字体等）设置输出路径
        assetFileNames: (assetInfo) => {
          let baseDir = 'assets/';
          // 根据文件后缀分类到对应子目录
          if (assetInfo.name?.endsWith('.json')) {
            baseDir += 'animations/';
          } else if (assetInfo.name?.match(/\.(png|jpe?g|svg|gif|webp)$/)) {
            baseDir += 'images/';
          } else if (assetInfo.name?.match(/\.(woff2?|eot|ttf|otf)$/)) {
            baseDir += 'fonts/';
          }
          return `${baseDir}[name].[hash][extname]`;
        },
        // 可选：配置JS入口文件和chunk的输出路径
        entryFileNames: 'assets/js/[name].[hash].js',
        chunkFileNames: 'assets/js/[name].[hash].js'
      }
    }
  }
});

3. 注意JSON文件的导入方式 #

如果你的JSON文件是通过import data from './xxx.json'这种模块方式导入的，Vite默认会把JSON内容内联到JS代码中，不会生成单独的JSON文件。若要让这类JSON作为独立资源输出，需要在导入时添加?url后缀：

// 这样JSON会被当作静态资源处理，输出到assets/animations/目录下
import jsonAssetUrl from './path/to/your.json?url';

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