本文详解如何通过原生 javascript 的 `fetch()` api 安全、兼容地加载本地 json 文件，并将其动态渲染到 html 页面中，解决模块导入 json 时因 mime 类型限制导致的报错问题。
在现代浏览器中，直接通过 import 语句导入 .json 文件（如 import demo from './data.json'）仅在启用 JSON 模块支持（且服务端配置正确 MIME 类型）的 ES 模块环境中才可行。而多数本地开发场景（尤其是使用文件协议 file:// 或简易 HTTP 服务时），服务器默认不将 .json 文件响应为 application/json MIME 类型，或浏览器对 <script type="module"> 中的 JSON 导入执行严格 MIME 校验，从而触发你遇到的错误：
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json".
✅ 正确做法是：使用 fetch() 发起 HTTP 请求获取 JSON 数据——这是标准、跨浏览器、无需额外构建工具的推荐方案。
✅ 推荐实现（原生 JavaScript，无依赖）
修改你的 script.js（注意：不再使用 type="module" 导入 JSON，而是用 fetch 异步加载）：
// js/script.js
document.addEventListener('DOMContentLoaded', () => {
fetch('./data.json')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
// ✅ 成功解析 JSON，可安全渲染
const demoEl = document.getElementById('demo');
// 示例：以预格式化方式显示（保留缩进与结构）
demoEl.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
// 或按需渲染为列表、表格等（见下方扩展）
// createList(data);
})
.catch(error => {
console.error('加载 JSON 失败:', error);
document.getElementById('demo').textContent = '数据加载失败，请检查 data.json 路径及格式。';
});
});同时，将 index.html 中的脚本引入改为普通脚本（移除 type="module"，避免模块上下文限制）：
立即学习“前端免费学习笔记（深入）”；
<!-- index.html --> <body> <div id="demo">加载中...</div> <script src="./js/script.js"></script> </body>
⚠️ 注意事项：确保 data.json 文件路径正确（与 script.js 同级？则 ./data.json 正确；若在 js/ 目录下，则应为 ./data.json 或 ../data.json，依实际目录结构调整）；JSON 文件必须是严格语法正确的（双引号键名、无尾逗号、UTF-8 编码）；不能直接用 file:// 协议打开 HTML（Chrome/Firefox 会拦截 fetch 跨源请求）→ 请使用本地服务器，例如：VS Code 安装 Live Server 插件一键启动；终端运行 npx serve 或 python3 -m http.server 8000。
? 扩展：将 JSON 渲染为 HTML 列表（示例）
假设 data.json 内容如下：
[
{"name": "Alice", "age": 30},
{"name": "Bob", "age": 25}
]可在 then(data => { ... }) 中添加：
function createList(items) {
const list = document.createElement('ul');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = `${item.name} (${item.age}岁)`;
list.appendChild(li);
});
document.getElementById('demo').innerHTML = '';
document.getElementById('demo').appendChild(list);
}
// 调用：createList(data);✅ 总结
- ❌ 避免在 <script type="module"> 中 import JSON（兼容性差、依赖服务端配置）；
- ✅ 使用 fetch('./data.json').then(r => r.json()) 是标准、可靠、零依赖的方案；
- ✅ 始终包裹在 DOMContentLoaded 或 window.onload 中，确保 DOM 就绪；
- ✅ 添加错误处理与用户提示，提升健壮性；
- ✅ 开发时务必通过本地 HTTP 服务器访问，而非双击打开 HTML 文件。
遵循以上方法，即可稳定、清晰地将 JSON 数据动态展示在网页中。
