为什么用Vite导入JSON文件时报“Unexpected token”错误？

司马瑞玲提问于 2026-01-26 14:44:31 阅读 102

工具

在Vue组件里用import引入本地JSON文件时突然报错，提示“Unexpected token {”。之前正常运行过，今天改了数据结构就崩了……

代码是这样的：

<script setup>
import data from './data.json'
console.log(data)
</script>

JSON文件结构没问题，试过重命名后缀、检查路径都正常。用CommonJS require反而能读到内容，但Vite+ESM方式就是报错，搞不懂咋回事……

JSON导入

我来解答赞 7 收藏

反馈

2 条解答

端木冰冰 Lv1

Vite 默认不支持直接导入 JSON 文件，需要显式声明类型。
改一下代码：import data from './data.json' assert { type: 'json' }
如果还报错，检查 Vite 版本，升级到最新，或者在 vite.config.js 里加插件支持 JSON 导入。

2026-02-18 07:02

Designer°正毅 Lv1

这个问题其实挺常见的，尤其是用 Vite 的时候。Vite 默认对 JSON 文件的支持确实有点特殊的地方，我来帮你一步步解决。

### 第一步：确认 Vite 的版本
先检查下你用的 Vite 版本，因为不同版本可能处理方式稍微有点变化。打开终端，运行：

npm list vite

如果是 3.x 或更新的版本，基本问题不大，继续往下看。如果是老版本，建议先升级一下：

npm install vite@latest

### 第二步：理解报错原因
报错 Unexpected token { 是因为 Vite 默认不会直接将 JSON 文件作为模块导入，除非你显式地告诉它怎么处理。虽然 Vite 支持 JSON 导入，但有时候配置或者缓存的问题会导致它识别不出。

### 第三步：修改配置文件
在你的项目根目录找到 vite.config.js（如果没有就新建一个），然后加上这段代码：

// vite.config.js

import { defineConfig } from 'vite'



export default defineConfig({

  // 确保开启 JSON 模块支持

  optimizeDeps: {

    include: ['./data.json'] // 如果你的 JSON 文件路径不是这个，改成实际路径

  }

})

这样做的目的是让 Vite 明确知道你需要把 data.json 当作模块处理。

### 第四步：清理缓存并重启
有时候 Vite 的缓存会捣乱，导致配置改了也没效果。所以重启之前先清一下缓存：

rm -rf node_modules/.vite

npm run dev

### 第五步：验证代码
现在回到你的 Vue 组件，重新试试这段代码：

<script setup>

// 直接引入 JSON 文件

import data from './data.json'



// 打印数据看看是否正常加载

console.log(data)

</script>

如果一切正常，你应该能在控制台看到 JSON 数据了。

---

### 补充说明
如果你还是有问题，可以试试以下几点：
1. **检查 JSON 文件内容**：确保没有语法错误，比如多余的逗号、未闭合的括号等。
2. **路径问题**：确认 ./data.json 路径是相对于组件文件的正确位置。
3. **尝试动态导入**：如果静态导入还是不行，可以用动态导入测试一下：

const loadJSON = async () => {

   const data = await import('./data.json')

   console.log(data.default) // 动态导入时数据通常在 default 属性里

}

最后，如果还是搞不定，把完整的错误信息贴出来，我们再一起看看。这种问题其实挺烦人的，但一步步排查下来总能搞定！

2026-02-01 10:11