最可靠方式是用 fetch() 异步加载 json：确保路径正确、服务返回 application/json、json 语法严格（双引号、无注释、无尾逗号），并用 .catch() 捕获错误；禁止 script 标签引入或同步读取。
直接用 fetch() 加载 JSON 文件最可靠
浏览器不支持在 HTML 里用 <script src="config.json"></script> 直接引入 JSON，会报 MIME 类型错误或解析失败。唯一通用、无构建工具依赖的方式是用 JavaScript 的 fetch() 异步加载。
常见错误现象：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json"——这就是误把 JSON 当 JS 脚本引入导致的。
- 确保 JSON 文件放在可访问的静态路径下（如同级目录：
./config.json） - 服务必须返回
Content-Type: application/json（本地双击打开file://协议会跨域失败，务必用本地服务器，比如npx serve或 VS Code Live Server） - 加
.catch()捕获网络失败或解析错误，避免静默失败
fetch('./config.json')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(config => {
console.log(config.apiBase);
})
.catch(err => console.error('加载配置失败:', err));
JSON 文件必须符合严格语法，否则 res.json() 报错
哪怕多一个逗号、少一个引号、用了单引号，res.json() 就会抛出 SyntaxError: Unexpected token。这不是代码问题，是配置文件本身非法。
- 键名和字符串值必须用双引号：
{"timeout": 5000}✅，{'timeout': 5000}❌ - 末尾不能有逗号：
{"a": 1, "b": 2,}❌（虽然某些编辑器容忍，但标准 JSON 不允许） - 不能有注释：
// 这行会直接导致解析失败 - 推荐用 VS Code 安装 “JSON Tools” 插件，保存时自动校验格式
需要同步读取？不存在——别试图绕过异步限制
没有 require('./config.json')（Node.js 才有），也没有 XMLHttpRequest.open(..., false)（现代浏览器已禁用同步 XHR）。强行“同步”只会锁死主线程、触发警告甚至报错。
- 所有依赖配置的逻辑必须放在
fetch().then()内部，或用async/await封装 - 如果多个模块都要用 config，建议封装成 Promise 缓存：首次 fetch 后
resolve，后续调用直接返回已解析的 Promise - 不要在
<script></script>标签里写同步初始化代码，等fetch完再调用initApp(config)
Vue/React 等框架项目？优先走构建阶段注入
如果项目用 Vite、Webpack 或 Create React App，运行时 fetch 不是首选。更稳的方式是在构建时把 JSON 内容读入 JS 变量：
- Vite：直接
import config from './config.json'（默认支持） - Webpack：需配置
json-loader（v5+ 已内置） - Create React App：同样支持
importJSON，但生产环境打包后路径要留意是否被复制到public/下 - 注意：构建时注入 ≠ 运行时可更新；若配置需动态变更（如切换环境），仍得用
fetch
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
