Vue 读取本地静态文件 json【2种方法及优缺点】

最新推荐文章于 2024-05-16 10:44:42 发布

IT博客技术分享

最新推荐文章于 2024-05-16 10:44:42 发布

阅读量4.8k

点赞数 1

分类专栏： VUE相关问题汇总文章标签： Vue 读取本地静态文件 json【2种方法及优缺点】

本文链接：https://blog.csdn.net/qq_41646249/article/details/102851007

版权

53 篇文章 4 订阅

订阅专栏

使用vue读取本地的静态文件。

格式：

var json = require('文件的相对地址');

优点：可以按照你写的顺序去执行，没有任何书写方面的局限。

缺点：当你打包的时候，它很可能被打包到 js 中去，出现这种情况基本就凉凉了。你的 js 超级大。网站基本无法访问。

解决：你的 js ，很大但是你可以把它cdn加速。这样虽然很方便，但是你的流量就会消耗的很快。【钱多无视流量】

格式：

this.$ajax.get('http://localhost:80/static/map/province/anhui' +'.json')
.then( response => {
    this.json = response.data;                    
})

说明：

1、上面的ajax的请求地址，是你的服务器地址。简单来说，你复制这个地址去浏览器可以访问到你的json数据。

2、上面的 ajax 是 axios。我只是给它重新取了个名字

3、缺点是，你无法控制ajax什么时候去调用的。很可能当你需要数据的时候，即使你把上面请求的代码，放在最前面都可能不行。

4、解决办法。如果你请求的数据只有一次一个。那么你只需要把你的渲染代码。放在ajax的回调函数里面就好了。

5、如果你是多次请求，你可以考虑一下ajax的嵌套。所有的渲染页面，都放在ajax里面，一定确保要渲染的时候已经获取到了数据。

总结：
虽然，require 来获取数据很简单，很容易被接受。但是js太大，这一个缺点就抹杀了它。推荐使用ajax。

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140

关注