HTML JSON模块导入方法（基础）

很多刚接触前端开发的朋友，都遇到过这样一个问题：想在HTML页面里直接导入一个JSON文件来用，结果浏览器报错了。比如，你信心满满地写下 import data from './data.json'，期待数据到手，结果控制台却无情地抛出一个 Unexpected token { 或者 Cannot import JSON module 的错误。

这背后的原因其实很明确：HTML和原生的ES模块规范，至今都不支持直接导入JSON文件。 你看到的那些能成功导入的项目，多半是借助了像Vite、Webpack这样的构建工具，或者是运行在Node.js这样的环境里。在纯HTML+原生Ja vaScript的环境下，这条路目前是走不通的。

为什么 import data from './data.json' 在纯 HTML 中会失败

这个错误非常典型，通常有两种提示：Uncaught SyntaxError: Cannot parse module 或者 Failed to load module script: Expected a Ja vaScript module script...。

根源在于两点：

• 首先，一个名为“JSON modules”的TC39提案目前还处于Stage 3阶段（截至2026年4月），尚未被正式纳入Ja vaScript标准，因此浏览器厂商还没有实现它。
• 其次，当你在script标签里使用 type="module" 时，浏览器只接受MIME类型为 text/ja vascript 的响应。而服务器返回的JSON文件，其MIME类型是 application/json，这会被浏览器直接拒绝。

三种能用的替代方案（按推荐顺序）

既然原生的路暂时不通，我们不妨换个思路：目标是把JSON数据拿到手，而不是纠结于“导入”这个形式。下面这三种方法，都可以在纯HTML环境下直接运行，无需任何构建工具。

• 使用 fetch + response.json()：这是目前最现代、最可靠的方式，所有主流现代浏览器（Chrome 42+、Firefox 39+、Safari 10.1+）都支持。不过要注意，页面必须运行在本地服务器（如 http://localhost）或HTTP(S)协议下，否则会触发跨域限制。
• 使用 + 全局变量包装：这种方法甚至不需要本地服务器。但前提是，你的JSON文件需要改写成Ja vaScript代码的格式，例如：const myData = { "name": "Alice" };。文件后缀可以还是 .json，但内容本质已经是JS了。
• 内联 声明对象：只适用于数据量极小的配置场景（比如 {"theme": "dark", "lang": "zh"}）。直接把JSON对象写在script标签里。这种方法要小心，避免暴露敏感数据，也要注意别污染了全局作用域。

fetch 方案中容易漏掉的关键检查点

很多人用fetch方法时，写完 fetch('./data.json') 就以为大功告成，结果数据没拿到，控制台也没明显错误。这时候，你需要按顺序排查下面三件事：

• 路径对了吗？ 打开浏览器的开发者工具，切换到Network（网络）标签页，刷新页面，看看 data.json 这个请求的状态码是不是 200。如果是 404，那很可能是文件路径写错了，比如少了个 ./ 或者多了一层目录。
• JSON格式合法吗？ 确保你的JSON文件是严格合法的。尾随逗号（如 {"a": 1,}）、使用单引号（如 {'a': 1}）、或者写了Ja vaScript风格的注释（如 // comment），这些在编辑器中可能不报错，但 response.json() 方法解析时会直接抛出 SyntaxError。
• 执行时机对吗？ 你的fetch调用代码，有没有用 document.addEventListener('DOMContentLoaded', ...) 包裹起来？如果没有，脚本可能在DOM元素加载完成前就执行了，后续那些操作DOM的代码自然就找不到目标元素。

用 时的真实限制

把JSON文件当JS脚本来加载，这个方法看似取巧，实则有不少“暗坑”：

• 格式必须转换：JSON文件必须以一个变量声明开头，比如 DATA = {...}; 或 var config = [...];。否则浏览器会把它当作无效的Ja vaScript代码来执行，必然失败。
• 变量名冲突：你定义的变量名必须是全局唯一的。如果你用了 data 这个变量名，而页面其他地方又用 let data = ... 声明了一次，就会导致错误或数据被意外覆盖。
• 错误处理困难：如果JSON内容写错了，浏览器只会报一个笼统的Ja vaScript解析错误，很难定位到具体是哪一行JSON格式出了问题。
• 缺乏动态性：这种方式只能在HTML页面加载时一次性注入数据。你无法实现“点击某个按钮后，再去加载另一份JSON数据”这样的动态需求。

所以，如果你的项目真的需要模块化管理、类型安全或者按需加载JSON数据，那么更务实的做法是考虑引入构建工具链。例如，Vite就对JSON文件的导入提供了开箱即用的支持。在纯HTML环境里硬套这些复杂需求，往往会事倍功半。