Uncaught TypeError: fs.writeFile is not a function

我原本想在vue中实现往 JSON 文件中写入一些内容，浏览器报错为题目

<script>
import view_lists from 'view_image.json'
const { writeFile } = require('fs')
const path = require('path');
const filePath = path.resolve(__dirname, 'tem_img.json');

export default {
  name:'viewImage',
  data() {
    return {
      loading: true,
      lists:[],
      tem_view: [],
    }
  },
  mounted() {
    this.loading = false
    this.lists = view_lists.view_list
  },
  methods: {
    setLoading() {
      this.loading = true
      setTimeout(() => (this.loading = false), 2000)
    },

    addImgUrl(imgUrl) {
      console.log(item) // 添加这一行以检查item是否已定义
      this.tem_view.push({ imgUrl })
      writeFile(filePath, JSON.stringify({ tem_view: this.tem_view }), (err) => {
        if (err) {
          console.log(err) // 添加这一行以检查是否有错误
          throw err
        }
        console.log('The file has been saved!')
      })
    },

    removeImgUrl() {
      this.tem_view.pop()
      writeFile(filePath, JSON.stringify({ tem_view: this.tem_view }), (err) => {
        if (err) {
          console.log(err) // 添加这一行以检查是否有错误
          throw err
        }
        console.log('The file has been saved!')
      })
    },
  },
}
</script>

实际上在浏览器环境下，JavaScript并没有直接操作文件系统的能力，因此不能使用Node.js提供的fs模块中的方法，如writeFile等。如果要读取或写入JSON数据，可以使用浏览器提供的Web API。

• 如果json文件是静态的，你可以使用XMLHttpRequest或fetch来请求json文件，并使用JSON.parse来解析返回的数据。1
• 如果json文件是动态的，你可以使用一个后端服务器来处理读写json文件的请求，并使用ajax或axios来与后端通信。