HTML中无法直接import JSON文件，因浏览器原生不支持JSON模块（TC39提案仍处Stage 3），且type="module"仅接受text/javascript MIME类型；推荐用fetch()+response.json()异步加载解析。
HTML 中无法直接 import JSON 文件
浏览器原生不支持 import 一个纯 .json 文件，比如写 import data from './config.json' 会报 TypeError: Failed to resolve module specifier 或 Not supported in this environment。这不是语法写错，而是 ES 模块规范默认不识别 JSON 后缀——即使 Vite、Webpack 等打包工具支持，裸 HTML + <script type="module"></script> 也不行。
用 fetch() 加载 JSON 是最通用的方案
所有现代浏览器都支持，无需构建工具，适合静态页或快速原型。关键点不是“导入”，而是“获取并解析”：
-
fetch()返回 Promise，必须用await或.then() - 必须显式调用
response.json()，不能省略（否则拿到的是 Response 对象，不是 JS 对象） - JSON 文件需同源（或服务端配 CORS），本地双击打开
file://协议会触发跨域限制 - 路径是相对 HTML 文件位置，不是 JS 文件位置
const data = await fetch('./config.json').then(r => r.json());
console.log(data.apiKey); // 正确访问字段
Vite / Webpack 环境下 JSON 可被 import，但有前提
这依赖构建工具的模块解析逻辑，不是浏览器能力。Vite 默认支持，Webpack 需要 JsonModulesPlugin（Webpack 5+ 内置）：
- 仅在打包时生效，开发服务器（
vite dev）也支持，但直接打开 HTML 不行 - 必须确保文件后缀是
.json，且内容符合严格 JSON 格式（不能有注释、尾逗号、单引号） - 导入结果是已解析的对象，不是字符串，无需再
JSON.parse() - 如果用 TypeScript，建议加类型声明，否则
data推导为any
import config from './config.json'; // ✅ Vite 下可行 console.log(config.timeout);
避免踩坑：JSON 导入失败的三个高频原因
实际调试时，90% 的问题出在这三处：
立即学习“前端免费学习笔记（深入）”；
- 服务器没返回
Content-Type: application/json（尤其用 Python Flask / Express 自定义路由时，漏设 header） - JSON 文件里用了
// 注释或undefined字段（JSON 不允许） - 路径写成
./data.json?ts=123这类带查询参数的 URL（部分旧版 Webpack 会拒绝解析）
真正需要“模块化 JSON”的场景，往往意味着数据结构稳定、复用频繁——这时候更该考虑把它转成 JS 模块导出对象，而不是卡在 JSON 导入上。
