前端 - 为什么three.js地图在部署后不显示？

Question

vue项目打包部署之后本地json为什么访问不到？
使用three.js画了个中国地图，本人小白也是看大佬源码改的代码。

 // 加载地图数据    loadMapData(str) {      // https://datav.aliyun.com/portal/school/atlas/area_selector      this.resetInitMap()      const loader = new THREE.FileLoader()      // require(`@/views/screen/mapMain/json/china.json`)      // /static/json/${str || 'china'}.json            loader.load(`/static/json/${str || 'china'}.json`, (data) => {        const jsondata = JSON.parse(data)        this.addMapGeometry(jsondata)      })    },

界面展示是正常的

但是发布之后就直接不展示地图，中间区域是没有地图元素的，并且颜色展示不正常
颜色不正常是我的另一个问题，
https://segmentfault.com/q/1010000044485869

打包之后dist文件下面是有 正常的json文件的

config配置 因为是服务器下多个前端 所以我的大屏加载了一节publicPath: "/intelligence/", 路由

使用 require(@/views/screen/mapMain/json/china.json) 加载文件时候回报错

我该如何修改这个地址才能让地图正常显示，

Answer 1

根据代码this.addMapGeometry(jsondata) 反正真正的地图点是后边的函数，只需要把json传递给下边函数就行了，就不按照原本给的方法加载了，直接使用require 将json传递给下级就完了
目前没有发现问题。是否有隐患不知道

 // 加载地图数据    loadMapData(str) {      // https://datav.aliyun.com/portal/school/atlas/area_selector      this.resetInitMap()            // const loader = new THREE.FileLoader()      // loader.load(`/static/json/${str || 'china'}.json`, (data) => {      //   const jsondata = JSON.parse(data)      //   this.addMapGeometry(jsondata)      // })      let jsondata = require(`@/assets/json/${str || 'china'}.json`)      this.addMapGeometry(jsondata)    },