本文详解如何通过原生 javascript 的 `fetch()` api 安全、兼容地加载本地 json 文件，并将其动态渲染到 html 页面中，解决模块导入 json 时因 mime 类型限制导致的报错问题。
在现代浏览器中，直接通过 import 语句导入 .json 文件（如 import demo from './data.json'）仅在启用 JSON 模块支持（且服务端配置正确 MIME 类型）的 ES 模块环境中才可行。而多数本地开发场景（尤其是使用文件协议 file:// 或简易 HTTP 服务时），服务器默认不将 .json 文件响应为 application/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 = '' + JSON.stringify(data, null, 2) + '
';
// 或按需渲染为列表、表格等（见下方扩展）
// createList(data);
})
.catch(error => {
console.error('加载 JSON 失败:', error);
document.getElementById('demo').textContent = '数据加载失败，请检查 data.json 路径及格式。';
});
});同时，将 index.html 中的脚本引入改为普通脚本（移除 type="module"，避免模块上下文限制）：
立即学习“前端免费学习笔记（深入）”；
传媒公司模板(RTCMS)1.0
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
下载
加载中...
⚠️ 注意事项：确保 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);✅ 总结
- ❌ 避免在
- ✅ 使用 fetch('./data.json').then(r => r.json()) 是标准、可靠、零依赖的方案；
- ✅ 始终包裹在 DOMContentLoaded 或 window.onload 中，确保 DOM 就绪；
- ✅ 添加错误处理与用户提示，提升健壮性；
- ✅ 开发时务必通过本地 HTTP 服务器访问，而非双击打开 HTML 文件。
遵循以上方法，即可稳定、清晰地将 JSON 数据动态展示在网页中。
