vue如何读取写入本地json文件

Vue.js 是一款流行的前端 JavaScript 框架，它主要用于构建用户界面和单页应用程序，在 Vue.js 应用程序中，有时我们需要读取或写入本地 JSON 文件，虽然 Vue.js 本身并不提供直接操作本地文件的 API，但我们可以借助浏览器的 JavaScript File API 和第三方库来实现这一功能。

1、使用 File API

浏览器的 JavaScript File API 提供了一种处理用户设备上的文件的方法，我们可以使用 FileReader 对象来读取本地 JSON 文件的内容，然后将其转换为 JavaScript 对象。

我们创建一个用于选择文件的 <input> 元素，并监听其 change 事件：

<input type="file" id="fileInput" @change="handleFileChange" />

在 Vue 实例中，我们定义 handleFileChange 方法来读取文件内容：

methods: {
  handleFileChange(event) {
    const file = event.target.files[0];
    if (file.type === 'application/json') {
      const reader = new FileReader();
      reader.onload = (e) => {
        const content = e.target.result;
        try {
          const data = JSON.parse(content);
          console.log(data);
        } catch (error) {
          console.error('解析 JSON 文件时出错:', error);
        }
      };
      reader.readAsText(file);
    }
  },
},

2、使用第三方库

除了使用 File API，我们还可以使用第三方库，如 papaparse 或 file-saver，来简化文件的读取和写入操作。

以 papaparse 为例，首先安装它：

npm install papaparse --save

在 Vue 组件中引入并使用它：

import Papa from 'papaparse';
export default {
  methods: {
    readJsonFile(event) {
      const file = event.target.files[0];
      Papa.parse(file, {
        header: true,
        complete: (results) => {
          console.log(results.data);
        },
        error: (error) => {
          console.error('解析文件时出错:', error);
        },
      });
    },
  },
};

常见问题与解答：

Q1: 如何在 Vue.js 中写入本地 JSON 文件？

A1: 由于浏览器的安全限制，我们不能直接将文件写入用户的设备，我们可以使用 file-saver 库来提示用户下载一个 JSON 文件，首先安装 file-saver：

npm install file-saver --save

使用它来生成并下载 JSON 文件：

import { saveAs } from 'file-saver';
export default {
  methods: {
    downloadJsonFile(data) {
      const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
      saveAs(blob, 'data.json');
    },
  },
};

Q2: 如何处理读取 JSON 文件时的错误？

A2: 在读取 JSON 文件时，我们可以使用 try-catch 语句来捕获可能发生的错误，如果解析 JSON 时出现错误，我们可以将其记录在控制台中，或者向用户显示一个错误消息。

Q3: 是否可以在 Vue.js 中使用 FileReader API 读取非 JSON 文件？

A3: 是的，FileReader API 可以读取各种类型的文件，如果你只想处理 JSON 文件，可以在读取文件之前检查文件类型，如上文示例所示，这样可以确保我们只处理预期的文件格式。