Vue3/Vite项目如何保持JSON文件外部不打包并读取？

你的尝试问题分析 #

• 第一种尝试：optimizeDeps.exclude 仅用于排除node_modules中的第三方依赖，避免其被预构建，对本地JSON文件完全无效，这个配置起不到任何作用。
• 第二种尝试：assetsInclude 是让Vite将更多文件类型识别为静态资源，但如果通过import语法导入JSON，Vite依然会把它转成JS模块打包进代码；assetsInlineLimit仅控制小资源是否内联为base64，无法阻止JSON被打包。
• 第三种尝试：import.meta.glob 默认会把匹配的文件作为静态资源处理，但你写法有误——glob返回的是键为文件路径、值为导入函数的对象，且默认模式下Vite还是会把这些文件打包到输出目录，并非保持完全外部。

正确实现方法 #

方法1：将JSON放在public目录下，用fetch读取 #

这是最简单的方案，Vite会将public目录下的文件原封不动复制到dist根目录，不会打包进代码：

1. 将myfile.json放到项目根目录的public/assets/下（和你原来的路径一致）
2. 在组件中用fetch动态读取：

<script setup>
import { onMounted } from 'vue'
let jsonData = null;

onMounted(async () => {
  const res = await fetch('/assets/myfile.json');
  jsonData = await res.json();
  // 后续可使用jsonData
});
</script>

构建后，myfile.json会完整保留在dist/assets/下，你可以随时修改这个文件而无需重新构建项目。

方法2：JSON不在public目录时，配置Rollup排除打包 #

如果JSON文件不在public目录，可通过Rollup配置让它被复制到输出目录，同时不被打包进代码：

1. 修改vite.config.ts：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import fs from 'fs';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'copy-external-json',
          generateBundle() {
            // 读取目标JSON文件
            const targetJsonPath = path.resolve(__dirname, 'src/assets/myfile.json');
            const jsonContent = fs.readFileSync(targetJsonPath, 'utf-8');
            // 将文件添加到打包输出中，指定输出路径
            this.emitFile({
              type: 'asset',
              source: jsonContent,
              fileName: 'assets/myfile.json'
            });
          }
        }
      ]
    }
  }
});

2. 组件中依旧用fetch读取构建后的路径：

<script setup>
import { onMounted } from 'vue'

onMounted(async () => {
  const res = await fetch('/assets/myfile.json');
  const data = await res.json();
});
</script>

关键注意点 #

• 禁止使用import './myfile.json'这类静态导入，因为Vite会直接将JSON内容打包进JS模块，无法保持外部。
• public目录下的文件必须通过根路径访问（如/assets/myfile.json，而非相对路径），Vite会自动处理开发与生产环境的路径映射。

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