Vue读取本地静态文件json的2种方法以及优缺点
Vue读取本地静态文件json
使用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。
Vue cli获取本地json数据总是404报错
vue cli版本查看
创建项目后 vue -V 查看脚手架版本，一般看文件目录就能看了
- vue-cli版本是2.0左右的就会有webpack的config目录
- vue-cli版本是3.0以上的就会有vue.config.js没有config目录
为什么会要先查看脚手架版本就是之后会出现的问题有关
创建本地json数据
vue-cli2.0将本地json数据放到目录static目录下
然后用请求就行了
这是vue cli2.0处理 之前我也是找了很久 有说放public目录下访问的 有说放static目录下访问的，都是报404错误，主要是脚手架版本没说清楚，我的是vue cli2.0用这方法就能访问了。
vue cli3.0将文件放在public目录下 访问的时候像这样：
如果不行可以试试绝对路径
在用 axios 时使用绝对路径。如http://localhost:8080/xxx.json。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了apache和nginx下vue页面刷新404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
由于添加门店时，需要选择门店的省、市、区、详细地址、以及门店的经纬度信息，本文给大家分享Vue集成百度地图实现位置选择功能，感兴趣的朋友一起看看吧2022-06-06
这篇文章主要介绍了优化Vue中date format的性能详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求，重复发送多次请求，本文主要介绍了Vue中Axios中取消请求及阻止重复请求的方法，感兴趣的可以了解一下2022-02-02
vue动态绑定多个类名方法详解(:class动态绑定多个类名)
vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下2022-11-11
opener属性是一个可读可写的属性,可返回对创建该窗口的Window对象的引用,下面这篇文章主要给大家介绍了关于vue中对window.openner使用的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue实现剪贴板复制功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
在Vue应用中,跨标签页的通信通常涉及到两个或多个浏览器标签页之间的信息共享,由于每个标签页或窗口都是独立的JavaScript执行环境,它们不能直接通过Vue或其他JavaScript库来直接相互通信,但是,有一些方法可以实现这种跨标签页的通信,以下是一些常用的跨标签页通信方法2025-03-03
本文主要介绍了vue动态修改页面title的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
本篇文章主要介绍了浅谈Vue.js应用的四种AJAX请求数据模式，本文将详细介绍在Vue应用程序中实现AJAX的四个方法，有兴趣的可以了解一下2017-08-08
最新评论