【Vue+Flask】Vue获取本地静态资源（Json）的几种方式

Vue页面需要加载JSON数据，直接通过【相对路径】【绝对路径】的加载方式，会出现以下错误。

Not allowed to load local resource: file:///E:/deskept/xxx

查阅了一些博客，知道了这是由于浏览器出于安全方面的考虑，禁止网页访问本地文件，当然也有很多的解决办法（数据存在tomcat、配置其他环境等），但是，我已经要用Vue做前端，Flask做服务端，如果再使用别的，那不会变得更加麻烦吗。

因此，我需要通过flask来传递数据，或者直接通过VUE来提供数据。

方法一：VUE加载JSON数据对象

一开始没想到这样，因为后续我会对JSON进行修改，反复调用同一个JSON文件，如果通过import来引入文件，不确定后续使用是否正常。

不过，如果仅仅是一次性使用，后续无变化，可以采用这种方式。（示例）

import CHINAMAP from "@/assets/mapdata/china.json";

map.addSource("states", {
  type: "geojson",
  data: CHINAMAP,
});

方法二：FLASK返回静态文件

这种方法和上述方法差不多，都是一次加载文件，虽然之后我可以对数据进行更改，但是由于一次加载后，会将缓存文件存储在浏览器中，第二次调用还是第一次的文件。（通过对路由名称的定义可以解决这个问题，不过会有点麻烦）

相较于方法一，方法二的优势在于可以传递参数，通过参数来获取文件，同时对文件名进行修改。

示例的路由结构式普通的，路由地址可以作为参数传递到下面的函数之中，通过这样的搭配，可以解决不同场景的需求，由于我觉得这样也挺麻烦的，所以想了第三种方法。

@app.route('/GetTestFIle',methods=['GET'])
@cross_origin()  # 跨域注解
def GetTestFIle():
    return send_from_directory('./xxx/','xxx.json')

方法三：FLASK解析文件传递至VUE

该方法通过flask对JSON进行解析，通过axios来获取解析后的结果。相对于上述两种方法，这种方法对json文件的值可以不断的更改，如果需要反复调用文件的话，能够以该方式来刷新数据。同时也具备了方法二路由参数的优点，使得灵活性更高，适用的场景也更加丰富。