在vue中，如何动态的使用public里面的json文件，打包后正常显示，修改后依旧正常显示

Question

在vue中，如何动态的使用public里面的json文件，打包后正常显示，修改后依旧正常显示

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

在 Vue 中动态使用 public 里面的 JSON 文件

在 Vue 中，你可以使用 require 函数或 import 语句来动态地使用 public 目录下的 JSON 文件。

使用 require 函数

import Vue from 'vue'
import axios from 'axios'

export default {
  data() {
    return {
      jsonData: {}
    }
  },
  mounted() {
    const jsonData = require('../public/data.json')
    this.jsonData = jsonData
  }
}

在上面的代码中，我们使用 require 函数来加载 data.json 文件，然后将其赋值给 jsonData 数据对象。

使用 import 语句

import Vue from 'vue'
import axios from 'axios'
import jsonData from '../public/data.json'

export default {
  data() {
    return {
      jsonData
    }
  }
}

在上面的代码中，我们使用 import 语句来加载 data.json 文件，然后将其赋值给 jsonData 数据对象。

在打包后正常显示 在 Vue CLI 3.x 中，你可以使用 vue.config.js 文件来配置打包选项。在 module.exports 对象中，你可以添加以下代码：

module.exports = {
  // ...
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.json$/,
          loader: 'json-loader'
        }
      ]
    }
  }
}

这将告诉 Webpack 使用 json-loader 加载 JSON 文件。

修改后依旧正常显示 如果你修改了 data.json 文件，Vue 应用程序将自动重新加载该文件。因为 Vue 使用了观察者模式（Observer Pattern），当文件变化时，Vue 将自动重新渲染组件。

因此，在 Vue 中，你可以使用 require 函数或 import 语句来动态地使用 public 目录下的 JSON 文件，并且在打包后正常显示，修改后依旧正常显示。