vue项目中访问本地json数据
更新时间：2024年07月26日 14:48:12 作者：小洁的博客
这篇文章主要介绍了vue项目中访问本地json数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue访问本地json数据
如果你的项目中需要模拟下json数据，来看下访问速度，那就参照这个试试吧，首先创建test.josn，放在pulic目录下
见下图：
定义js
// 文件 prodOrder.js
export function test(data) {
return request({
url: 'http://localhost:8080/../test.json',
method: 'get',
data
});
}
页面引用
import {
test
} from '@/api/produce/prodOrder';
调用
test().then((res) => {
console.log(res)
})vue访问本地json文件的那些事儿
VUE访问本地json文件，会产生跨域的报错，导致数据无法显示
报错问题的图示
谷歌里面会出先 is been blocked CORS；
这里设计的就是浏览器设置的同源策略，也是基于安全考虑的，但是吧，就是对于本地开发来说确实比较麻烦。至于什么是同源策略，这里就不赘述了，这里主要以解决问题为主。
这边的系统，设备，和编辑器
windows10系统、编辑器 sublime
首先把项目引入到sublime中
- 第一步 Ctrl+Shift+P打开命令面板，输入Package Control: Install Package
- 第二步 输入 SublimeServer并且选中
- 第三步 安装完成过后通过Tool选项 → SublimeServer → Start SublimeServer
- 第四步 通过Tool选项 → SublimeServer → Start SublimeServer -> Settings
主要是注意下面的端口，不要和其他项目的端口冲突即可。
在你需要访问的index.html里面右击鼠标，出现 View in SublimeServer，就会自动到浏览器的
浏览器地址会变成 http://localhost:8088/project/index.html 这样就会绕过同源策略的报错了，因为每个用于Web开发的IDE都内置http服务器，不用单独配置。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue2和vue3的组件封装还是有区别,下面这篇文章主要给大家介绍了关于Vue3如何封装组件的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue同个按钮控制展开和折叠同个事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
集成vue-cli脚手架里面的二维码插件貌似很多，一般都会满足大部分需求，这次就讲一下插件vue-qriously生成二维码效果，感兴趣的朋友一起看看吧2022-04-04
这篇文章主要介绍了vue深复制的相关资料，非常不错，具有参考借鉴价值，需要的朋友参考下2018-01-01
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧2023-02-02
这篇文章主要给大家介绍了关于vue中常见的问题及解决方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
在Vue中,实现图片或组件的平铺布局并允许用户进行修改,可以通过数据绑定、模板编写与交互设计来实现图片平铺,使用v-for指令和动态组件,可以创建可编辑的组件平铺布局,允许用户通过点击触发编辑操作,通过外部编辑面板修改属性后保存更改2024-10-10
这篇文章主要为大家详细介绍了Vue2.0+SVG实现音乐播放圆形进度条组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了详解vue-cli@2.x项目迁移日志，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最近有个需求是前端在浏览器显示摄像头传回的RTSP视频流,下面这篇文章主要给大家介绍了关于vue中播放rtsp流的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
最新评论