Vue2.6.12导入本地JSON文件修改后构建读取到旧值问题

你使用import json from '../static/data.json'语法导入本地JSON时，Vue CLI 底层依赖的webpack会在**构建执行阶段（执行npm run build命令时）**直接把JSON文件的内容解析后，静态内联打包进最终生成的JS产物文件中，相当于代码被直接替换成了硬编码的const json = {"name":"John", "age":30}。
构建流程结束后，你再修改磁盘上的原始data.json文件，已经打包好的JS代码里不会保留对这个外部JSON文件的引用，自然读不到修改后的新值，渲染结果永远是构建那一刻JSON文件里存储的旧内容。
另外这里存在一个用法误区：static目录（Vue CLI 2.x）/public目录（Vue CLI 3.x+）下的文件，设计初衷是作为运行时可直接访问的静态资源，不应该用import语法导入。一旦用import导入，文件就会被webpack当作普通模块依赖处理，完全失去静态资源构建后可独立修改的特性。

如果需要实现「构建完成后修改JSON内容，页面无需重新打包就能读取到最新值」的效果，选择以下方案即可：

• 首选方案：移除JSON的import导入语句，改为运行时通过HTTP请求拉取静态JSON
  删除原有import导入JSON的代码，在组件生命周期钩子中用fetch或项目已封装的AJAX库（比如axios）请求静态资源对应的公开访问地址，这样每次页面加载都会实时读取当前部署环境下的JSON内容，修改后刷新页面就能拿到最新值，示例代码：

  export default{
    name: 'App',
    data () {
      return {
         name: '',
      }
    },
    async mounted () {
      // 路径填写静态资源对应的公开访问路径，不要写相对于源码目录的路径
      const resp = await fetch('/static/data.json')
      const jsonData = await resp.json()
      this.name = jsonData.name
      console.log(this.name) // 修改JSON后刷新页面即可输出最新值
    }
  }
  

• 临时应急方案：如果已经完成构建不想重新打包，可以直接修改dist目录下打包生成的JS文件里对应的硬编码值，但这种方式维护成本极高，修改时容易破坏JS代码结构，不推荐长期使用。

注意：如果使用运行时请求的方案，修改JSON时要直接修改部署后dist目录对应路径下的文件，不要只修改源码目录里的原始文件却不重新部署，否则访问到的还是旧的静态资源。

内容的提问来源于stack exchange，提问作者Mahbub Alam