HTML中无法直接import JSON文件，因浏览器原生不支持JSON模块（TC39提案仍处Stage 3），且type="module"仅接受text/javascript MIME类型；可行替代方案为fetch+response.json()、<script src>全局变量包装或内联<script>声明。
HTML 本身不支持直接 import JSON 文件——浏览器会报 Unexpected token { 或 Cannot import JSON module 错误。ES 模块规范（type="module"）至今不原生允许 import .json 文件，除非构建工具（如 Vite、Webpack）或运行时环境（如 Node.js）做了额外处理。
为什么 import data from './data.json' 在纯 HTML 中会失败
这是最常卡住的地方：你写了标准的 ES 模块导入语法，但浏览器原生不认。错误典型是：
Uncaught SyntaxError: Cannot parse module 或 Failed to load module script: Expected a JavaScript module script...
根本原因有两个：
立即学习“前端免费学习笔记（深入）”；
- 浏览器尚未实现 TC39 JSON modules 提案（截至 2026 年 4 月仍为 Stage 3，未进入正式标准）
-
type="module"脚本只接受 MIME 类型为text/javascript的响应，而服务器返回application/json会直接被拒绝
三种能用的替代方案（按推荐顺序）
别纠结“模块导入”，先让数据进 JS 变量里。以下方法全部在普通 HTML + 原生 JS 下可直接跑，无需构建工具：
-
fetch +
response.json()：最现代、最可靠，适用于所有现代浏览器（Chrome 42+、Firefox 39+、Safari 10.1+）。需确保页面跑在本地服务（http://localhost）或 HTTP(S) 上，否则触发跨域限制 -
<script src="./data.json">+ 全局变量包装：不用服务也能跑，但 JSON 文件必须改写成 JS 格式，例如：const myData = { "name": "Alice" };。注意：文件后缀可仍是.json，但内容本质是 JS 代码 -
内联
<script>声明对象：仅适合极小的配置类 JSON（比如{"theme": "dark", "lang": "zh"}），避免暴露敏感数据或污染全局作用域
fetch 方案中容易漏掉的关键检查点
很多人写完 fetch('./data.json') 就以为万事大吉，结果控制台静默失败。实际要确认三件事：
- 路径是否真实存在？用浏览器开发者工具 Network 标签页看
data.json请求状态码是不是200；如果是404，说明路径错了（比如少了个./或多了一层src/） - JSON 文件是否严格合法？不能有尾随逗号（
{"a": 1,}）、单引号（{'a': 1}）、注释（// comment）——这些在编辑器里可能不报错，但response.json()会抛SyntaxError -
document.addEventListener('DOMContentLoaded', ...)是否包裹了 fetch？否则脚本执行时 DOM 还没就绪，后续渲染逻辑会找不到元素
用 <script src="data.json"> 时的真实限制
这个技巧看似简单，实则暗坑密集：
- JSON 文件必须以变量声明开头，例如
DATA = {...};或var config = [...];，否则浏览器当成非法 JS 执行失败 - 变量名必须全局唯一，且不能和已有变量冲突（比如用了
data，又在别的脚本里定义了let data = ...，就会报错或覆盖） - 无法做错误处理：如果 JSON 写错了，浏览器只报 JS 解析错误，不会告诉你哪一行 JSON 不合法
- 无法动态加载：只能在 HTML 加载时一次性注入，做不到“点击按钮再加载另一份 JSON”
真正需要模块化、类型安全、按需加载的场景，应该转向构建工具链（Vite 的 import JSON 支持开箱即用），而不是硬套原生 HTML。
