Vue 读取本地静态文件 json【很全,很详细】

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Tomwildboar/article/details/85340834

文章转自原创博客   

http://www.xdx97.com/#/single?bid=c4fadbb8-93e3-3129-10eb-a7216f4a99b4

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

方法一:require

 格式:

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

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

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

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

方法二:ajax

格式:

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。

猜你喜欢

转载自blog.csdn.net/Tomwildboar/article/details/85340834