js怎么加载本地json文件

JS怎么加载本地JSON文件？3种实用方法详解

在JavaScript开发中，加载本地JSON文件是一个常见需求，比如用于配置管理、模拟数据接口、多语言资源文件等场景，但由于浏览器的安全限制（同源策略），直接通过file://协议打开HTML文件时，fetch或XMLHttpRequest请求本地JSON文件会报跨域错误，本文将介绍3种实用的本地JSON文件加载方法，涵盖不同开发场景（本地调试、Node.js环境、打包工具项目）。

使用`fetch` + `file://`协议（仅限本地调试，需浏览器配置）

fetch是现代浏览器提供的原生API，用于发起网络请求，但在本地开发时，直接通过file://打开HTML文件，fetch请求本地JSON会因同源策略被阻止。临时解决方案：启动本地服务器，让HTML文件通过http://或https://协议访问，这样fetch就能正常加载本地JSON文件。

操作步骤：

创建项目结构
在本地文件夹中创建以下文件：
```
project/
├── data.json
└── index.html
```

编写JSON文件
data.json内容示例：

{
  "name": "张三",
  "age": 25,
  "hobbies": ["阅读", "编程", "旅行"]
}

编写HTML文件
index.html中使用fetch请求data.json：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>fetch加载本地JSON</title>
</head>
<body>
  <div id="result"></div>
  <script>
    fetch('./data.json')
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应异常');
        }
        return response.json(); // 解析JSON数据
      })
      .then(data => {
        document.getElementById('result').innerHTML = `
          <p>姓名: ${data.name}</p>
          <p>年龄: ${data.age}</p>
          <p>爱好: ${data.hobbies.join(', ')}</p>
        `;
      })
      .catch(error => {
        console.error('加载JSON失败:', error);
      });
  </script>
</body>
</html>

启动本地服务器
- 方法1：使用Python（内置HTTP服务器）
  打开终端，进入project文件夹，执行：
```
python -m http.server 8000
```
  然后浏览器访问http://localhost:8000/index.html。
- 方法2：使用Node.js的http-server包
  先安装：npm install -g http-server，然后在project文件夹执行：http-server，访问http://localhost:8080/index.html。

注意事项：

此方法仅适用于开发调试，生产环境不建议使用（需部署到Web服务器）。
直接用file://打开HTML文件会报错（如Failed to load resource: net::ERR_FAILED）,必须通过本地服务器访问。

使用Node.js的`fs`模块（适用于服务端环境）

如果是在Node.js环境中（如后端开发、Electron应用、CLI工具），可以直接使用Node.js内置的fs（文件系统）模块读取本地JSON文件,无需考虑浏览器同源策略。

操作步骤：

创建项目结构

node-project/
├── data.json
└── read-json.js

JSON文件同上（data.json内容不变）。

编写Node.js脚本
read-json.js示例：

const fs = require('fs');
const path = require('path');
const jsonPath = path.join(__dirname, 'data.json'); // 获取JSON文件绝对路径
try {
  const fileData = fs.readFileSync(jsonPath, 'utf-8'); // 同步读取文件内容
  const jsonData = JSON.parse(fileData); // 解析JSON
  console.log('加载的JSON数据:', jsonData);
  // 输出: 加载的JSON数据: { name: '张三', age: 25, hobbies: ['阅读', '编程', '旅行'] }
} catch (error) {
  console.error('读取JSON失败:', error.message);
}

运行脚本
终端进入node-project文件夹，执行：
```
node read-json.js
```

进阶：异步读取（推荐）

fs.readFileSync是同步方法，会阻塞线程，推荐使用异步方法fs.readFile：

const fs = require('fs');
const path = require('path');
const jsonPath = path.join(__dirname, 'data.json');
fs.readFile(jsonPath, 'utf-8', (err, data) => {
  if (err) {
    console.error('读取JSON失败:', err);
    return;
  }
  try {
    const jsonData = JSON.parse(data);
    console.log('加载的JSON数据:', jsonData);
  } catch (parseError) {
    console.error('解析JSON失败:', parseError);
  }
});

适用场景：

Node.js后端服务读取配置文件。
Electron桌面应用加载本地数据。
CLI工具处理本地JSON文件。

使用打包工具（如Webpack/Vite）的前端项目

在现代前端项目（基于Vue、React、Angular等）中，通常使用Webpack或Vite作为打包工具，这些工具支持将JSON文件作为模块直接导入,无需手动发起HTTP请求。

操作步骤：

创建Vue/React项目（以Vue为例）
使用Vite创建Vue项目：
```
npm create vue@latest my-vue-app
cd my-vue-app
```

放置JSON文件
在src目录下创建data.json：

{
  "title": "Vue项目",
  "version": "1.0.0",
  "features": ["组件化", "响应式", "虚拟DOM"]
}

在组件中导入JSON
src/components/HelloWorld.vue示例：

<script setup>
import jsonData from '../data.json'; // 直接导入JSON文件
console.log('导入的JSON:', jsonData);
</script>
<template>
  <div>
    <h1>{{ jsonData.title }}</h1>
    <p>版本: {{ jsonData.version }}</p>
    <p>特性: {{ jsonData.features.join(', ') }}</p>
  </div>
</template>

运行项目
执行npm run dev，启动开发服务器后访问页面,即可看到JSON数据渲染到页面上。

原理说明：

Webpack/Vite在打包时会将JSON文件转换为JavaScript模块（默认通过JSON.parse解析），因此可以直接import使用，这种方式无需额外配置,且是前端项目的标准实践。

对比与总结

方法	适用场景	优点	缺点
`fetch` + 本地服务器	本地调试、小型项目	简单直观，符合前端开发习惯	需启动本地服务器，生产环境需部署
Node.js `fs`模块	服务端、Electron、CLI	无跨域问题，可直接操作文件系统	仅限Node.js环境，浏览器不适用
打包工具导入	现代前端项目（Vue/React）	无需手动请求，打包工具原生支持	依赖构建工具，需项目环境支持

最佳实践建议：

本地调试：使用fetch + 本地服务器（如Python的http.server或Vite/Webpack dev server）。
Node.js环境：优先用fs.readFile（异步）读取文件。
前端项目：直接通过import导入JSON文件，由打包工具处理。

根据实际开发场景选择合适的方法,避免因环境差异导致的问题。

正文

js怎么加载本地json文件