HTML怎么做JSON模块导入_HTML import JSON模块导入方法基础

作者：袖梨 2026-06-16

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 还没就绪，后续渲染逻辑会找不到元素