如何在Vue.js与D3.js中导入本地JSON文件？

以下是几个可行的解决方案，针对你遇到的d3.json无法读取本地JSON文件的问题：

方案1：将JSON文件放到public目录 #

Vue的public目录下的资源会被直接复制到构建后的根目录，开发服务器(devServer)也会直接映射该目录下的文件，无需webpack处理。

• 操作步骤：
  1. 把map.json移动到项目根目录的public文件夹下（无public目录则新建）
  2. 使用绝对路径调用d3.json：

  d3.json('/map.json')
    .then(data => {
      // 处理你的数据
    })
    .catch(error => {
      console.error('加载JSON失败:', error)
    })
  

方案2：直接导入JSON文件后传给D3使用 #

既然你已经能通过import导入JSON文件，完全不需要再用d3.json发起HTTP请求，直接使用导入的对象即可：

import map from '@/assets/map.json'

// 直接把map数据传给D3的方法，以GeoJSON为例：
d3.select('svg')
  .append('g')
  .selectAll('path')
  .data(map.features)
  .enter()
  .append('path')
  // ... 后续可视化处理

方案3：通过require获取assets目录下JSON的正确路径 #

如果一定要把JSON放在assets目录，由于webpack会对assets下的资源进行路径处理（添加哈希后缀），直接用相对路径会找不到文件，这时候可以用require获取处理后的正确URL：

const mapUrl = require('@/assets/map.json')
d3.json(mapUrl)
  .then(data => {
    // 处理数据
  })

为什么你之前的方法无效？ #

• d3.json("../assets/map.json")：assets目录下的文件会被webpack编译处理，实际访问路径和你写的相对路径不一致，devServer无法定位到文件。
• Python SimpleHTTPServer触发CORS：Vue的devServer本身就是HTTP服务器，无需额外启动其他服务，跨域问题是因为两个服务器端口不同导致的。
• 错误配置vue.config.js的proxy：proxy是用来代理后端API请求的，不适用于访问本地静态资源，所以这个配置对你的场景无意义。

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