js怎么引用本地json

index.html 中通过 fetch 读取：

<script>
  fetch('file:///path/to/your/project/data.json')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      console.log('读取到的数据:', data);
    })
    .catch(error => {
      console.error('读取 JSON 文件出错:', error);
    });
</script>

问题：

• Chrome、Firefox 等浏览器会报错：Access to fetch at 'file:///...' from origin 'null' has been blocked by CORS policy（跨域限制）。
• 路径需写绝对路径，不同操作系统（Windows/macOS/Linux）路径格式不同,可移植性差。

此方法仅适用于极简单的本地测试,实际开发中不推荐。

通过 Web 服务器加载（推荐，兼容生产环境）

原理：

通过本地 Web 服务器（如 http-server、Live Server 等）启动项目，使 JSON 文件通过 http:// 或 https:// 协议访问，避免跨域问题,这是最常用且兼容性最好的方法。

使用 Live Server（VS Code 插件，适合前端开发者）

• 安装：在 VS Code 中搜索并安装 Live Server 插件。
• 启动：右键 index.html，选择 Open with Live Server（默认会在浏览器中通过 http://127.0.0.1:5500 打开）。

使用 http-server（Node.js 轻量级服务器）

• 安装 Node.js 后，全局安装 http-server：

  npm install -g http-server

• 启动：进入项目根目录，运行：

  http-server

• 浏览器访问提示的地址（如 http://127.0.0.1:8080）。

示例代码（服务器环境下）：

项目结构与之前一致，index.html 中通过 fetch 读取：

<script>
  fetch('./data.json')  // 相对路径，基于当前 HTML 文件的 URL
    .then(response => response.json())
    .then(data => {
      console.log('读取到的数据:', data);
      // 使用数据
      document.getElementById('name').textContent = data.name;
    })
    .catch(error => console.error('读取失败:', error));
</script>
<!-- 在页面中展示数据 -->
<div>
  <p>姓名：<span id="name"></span></p>
  <p>年龄：<span id="age"></span></p>
</div>

优势：

• 兼容所有现代浏览器,无跨域问题。
• 支持相对路径,可移植性强。
• 适合本地开发和生产环境。

通过 import 语句引入（ES6 模块，适合现代前端项目）

如果项目使用 ES6 模块（如通过 Vite、Webpack 等构建工具打包），可以直接通过 import 语句引入 JSON 文件，无需 fetch 请求。

前提：

• 项目支持 ES6 模块（如 HTML 中添加 <script type="module">）。
• 构建工具（如 Vite、Webpack）已配置 JSON 加载器（现代工具默认支持）。

示例代码：

项目结构：

project/
├── data.json
└── index.html

index.html：

<script type="module">
  // 直接导入 JSON 文件，会自动解析为 JavaScript 对象
  import data from './data.json';
  console.log('导入的数据:', data);
  document.getElementById('name').textContent = data.name;
</script>

注意：

• 需要服务器环境（ES6 模块通过 http:// 或 https:// 加载，无法在 file:// 协议下运行）。
• 如果不使用构建工具，部分浏览器（如 Chrome）可能需要配置 module 类型支持。

通过 XMLHttpRequest（传统方法，兼容旧浏览器）

fetch 是 ES6 引入的现代 API，对于需要兼容旧浏览器（如 IE11）的场景，可以使用 XMLHttpRequest（XHR）。

示例代码：

<script>
  const xhr = new XMLHttpRequest();
  xhr.open('GET', './data.json', true);  // true 表示异步请求
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log('读取到的数据:', data);
      document.getElementById('name').textContent = data.name;
    } else if (xhr.readyState === 4) {
      console.error('请求失败，状态码:', xhr.status);
    }
  };
  xhr.send();
</script>

特点：

• 兼容 IE9+ 及所有现代浏览器。
• 代码比 fetch 繁琐,推荐仅在需要兼容旧环境时使用。

如何选择合适的方法？

最佳实践建议：

1. 本地开发：使用 Live Server（VS Code 插件）或 http-server 启动项目，通过 fetch 读取 JSON 文件。
2. 现代前端项目：基于 Vite/Webpack 等构建工具，直接通过 import 导入 JSON 文件。
3. 兼容旧浏览器：若需支持 IE11，使用 XMLHttpRequest 或通过构建工具转译代码。

通过以上方法，你可以根据项目需求灵活选择合适的方式在 JavaScript 中引用本地 JSON 文件,确保开发效率和代码兼容性。