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

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。