JavaScript无法加载JSON文件用于Mustache模板渲染如何解决？

JSON.parse() 方法的入参只能是符合JSON格式的字符串，你直接传入文件路径字符串'./abc.json'时，它会尝试把路径字符串本身当成JSON内容解析，第一个字符是.不符合JSON语法，所以才会报Unexpected token . in JSON at position 0的错误，和你的JSON文件内容本身没有关系。

不需要依赖Node环境，用原生JS的fetch API加载外部JSON文件即可，改造后的代码如下：

async function renderHello() {
  try {
    // 请求加载同目录下的abc.json文件
    const response = await fetch('./abc.json');
    // 直接将响应解析为JSON对象，无需手动调用JSON.parse
    const json = await response.json();
    // 原有Mustache渲染逻辑保持不变
    const template = document.getElementById("template").innerHTML;
    const rendered = Mustache.render(template, json);
    document.getElementById("target").innerHTML = rendered;
  } catch (err) {
    // 可按需保留错误提示便于排查问题
    console.error('JSON加载失败：', err);
    document.getElementById("target").innerHTML = '版本标记加载失败';
  }
}

• 本地测试时不能直接用file://协议打开HTML文件，浏览器同源策略会阻止请求本地JSON文件，需要用任意静态HTTP服务启动站点测试，比如VSCode的Live Server插件、Python自带的python -m http.server临时服务都可以
• 你的两种abc.json写法都符合JSON规范，无需调整内容，只需确保文件没有BOM头、没有多余的尾逗号即可正常解析

内容的提问来源于stack exchange，提问作者hcdocs