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

「爱情、让人受尽委屈。」 2022-04-01 06:43 488阅读 0赞

> 所有文章优先发布在个人博客上，后续更新可能会忘记同步到CSDN上。给你带来不便抱歉。  
> 个人博客此篇文章：[https://www.xdx97.com/article/654798704103915520][https_www.xdx97.com_article_654798704103915520]

## 方法一：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。

[https_www.xdx97.com_article_654798704103915520]: https://www.xdx97.com/article?bamId=654798704103915520

发表评论取消回复

表情：

评论列表（有 0 条评论，488人围观）

还没有评论，来说两句吧...

相关阅读

相关 cookie, localStorage, sessionStorage的区别（很全，很详细）

原文网址：[cookie, localStorage, sessionStorage的区别（很全，很详细）\_IT利刃出鞘的博客-CSDN博客][cookie_ localSt

缺乏、安全感/ 2023年10月01日 08:36/ 0 赞/ 9 阅读

相关 JDBC（详细易懂，很详细，很详细，很详细）

回顾表连接内连接：隐式、显式隐式：没有join，使用where 显式：i

骑猪看日落/ 2023年06月29日 05:52/ 0 赞/ 37 阅读

相关 Angular.x读取本地静态json文件（引入json文件使用）

由于项目下拉加载数据过多（城市、行业），所以将数据封装成json数据放存放angular中静态文件的assets目录下， 1. 将json文件放入到assets文件下； 2

迷南。/ 2023年02月14日 15:52/ 0 赞/ 84 阅读

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

> 所有文章优先发布在个人博客上，后续更新可能会忘记同步到CSDN上。给你带来不便抱歉。 > 个人博客此篇文章：[https://www.xdx97.com/article

「爱情、让人受尽委屈。」/ 2022年04月01日 06:43/ 0 赞/ 489 阅读

相关 scikit-learn构建模型（很详细，很详细，很详细）

scikit-learn（简称sklearn）库整合了多种机器学习的算法，可以帮助使用者在数据分析过程中快速建立模型，且模型接口统一，使用起来非常方便。同时，sklea...

小灰灰/ 2021年01月25日 16:13/ 0 赞/ 959 阅读

相关 VMware Ubuntu安装详细过程（很详细，很详细，很详细）

不是每一个程序员都必须玩过linux，只是博主觉得现在的很多服务器都是linux系统的，而自己属于那种前端也搞，后台也搞，对框架搭建也感兴趣，但是很多生产上的框架和工具都...

朱雀/ 2021年01月22日 17:58/ 0 赞/ 819 阅读

相关 JQuery 高级进阶学习（很详细，很详细，很详细）

1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]])...

朱雀/ 2021年01月22日 15:12/ 0 赞/ 795 阅读

相关 java反射基础（很详细，很详细，很详细）

反射：框架设计的灵魂框架：半成品软件。可以再框架的基础上进行软件开发，简化编码反射：将类的各个组成部分封装为对象，这就是反射

小灰灰/ 2021年01月22日 14:26/ 0 赞/ 844 阅读

相关 java 的Lambda使用（很详细，很详细，很详细）

Lambda表达式 1. 函数式编程思想在数学中，函数就是有输入量、输出量的一套计算方案，也就是“拿什么东西做什么事情”。相对而言，面向对象思想过分强调“必须通过对象的...

系统管理员/ 2021年01月22日 14:22/ 5 赞/ 3642 阅读

相关 Servlet（java，很详细，很详细，很详细）

概念：运行在服务器端的小程序 Servlet就是一个接口，定义了Java类被浏览器访问到(tomcat识别)的规则。将来我们自定义一个类，实现Servlet接口，复写方法。

小灰灰/ 2021年01月22日 14:15/ 0 赞/ 821 阅读