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服务器，不用单独配置。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue简单封装axios之解决post请求后端接收不到参数问题
这篇文章主要介绍了Vue简单封装axios之解决post请求后端接收不到参数问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
Element Alert警告的具体使用方法
这篇文章主要介绍了Element Alert警告的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
uni-app 使用编辑器创建vue3 项目并且运行的操作方法
这篇文章主要介绍了uni-app 使用编辑器创建vue3 项目并且运行的操作方法,目前uniapp 创建的vue3支持 vue3.0 -- 3.2版本也就是说setup语法糖也是支持的，需要的朋友可以参考下
2023-01-01
Vue中CSS动画原理的实现
这篇文章主要介绍了Vue中CSS动画原理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
vue3引入highlight.js进行代码高亮的方法实例
最近忙着开发自己的开发脚手架,在做代码生成器的时候,有个预览功能,需要让代码高亮,下面这篇文章主要给大家介绍了关于vue3引入highlight.js进行代码高亮的相关资料,需要的朋友可以参考下
2022-04-04
浅谈Vuex注入Vue生命周期的过程
这篇文章主要介绍了Vuex 注入 Vue 生命周期的过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
vue 解决addRoutes多次添加路由重复的操作
这篇文章主要介绍了vue 解决addRoutes多次添加路由重复的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue解决跨域路由冲突问题思路解析
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。本文给大家详细介绍了vue解决跨域路由冲突问题思路解析，需要的朋友参考下吧
2017-11-11
vue-cli常用设置总结
本文给大家总结了vue-cli常用设置,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-02-02
vue使用showdown并实现代码区域高亮的示例代码
这篇文章主要介绍了vue使用showdown并实现代码区域高亮的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10