VUE访问本地json文件的那些事儿

最新推荐文章于 2023-10-16 20:38:58 发布
最新推荐文章于 2023-10-16 20:38:58 发布
阅读量1.6k 收藏
点赞数
分类专栏： HTML CSS 前端 文章标签： vue json 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41417172/article/details/99451281
版权
前端 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏

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

晨埃LUO定
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue加载json文件的方法简单示例
01-21
本文实例讲述了Vue加载json文件的方法。分享给大家供大家参考，具体如下： 一、在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版)： var appData = require('../address.json'); // 引入address.json文件 var apiRoutes = express.Router(); apiRoutes.get('/address',function (req,res) { res.json({ errno:0, data:appData }); }); app.use('
vue读取本地json文件
u014775723的博客
07-25 2841
方法一（我用的）： import test_mcc_json from '@/assets/data/test_mcc.json' 方法二： import axios from 'axios' Vue.prototype.$http=axios this.$http.get('../../static/data.json').then((response) => { c...
vue项目打包之后放在服务器上测试的时候访问不到本地json数据的解决方法
inticaler的博客
05-08 3104
上面的代码表示在本地开发项目时模拟后端数据。项目打包之后放在服务器上，json的路径需要按照原来的json实际路径放置才会访问到（/api/index.json）
在Vue中解决跨域问题可以通过以下几种方式：使用JSONP、CORS、代理服务器
最新发布
m0_71966801的博客
10-16 4507
JSONP（JSON with Padding）：JSONP是一种利用标签没有跨域限制的特性来获取数据的方法。在使用JSONP时，前端会动态创建一个标签，将请求发送到目标服务器上，并指定一个回调函数作为参数。目标服务器在返回数据时，将数据包装在回调函数中，以JavaScript代码的形式返回给前端。由于标签没有同源策略限制，因此可以获取到返回的数据。
vue.config.js 全局配置
热门推荐
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
在vue中读取本地Json文件的方法
10-18
在Vue.js应用中，有时我们需要从本地加载JSON文件来获取数据，这在开发阶段或处理静态数据时尤其有用。在本文中，我们将详细介绍如何在Vue中读取本地JSON文件。 首先，要实现这一功能，我们需要引入一个外部插件...
最新的vue读取本地json文件代码
01-23
要在Vue组件中读取本地JSON文件，首先将你的JSON文件放在`src/assets`目录下，假设你有一个名为`data.json`的文件，里面包含了你的数据。 在Vue组件中，你可以使用`axios`库来读取本地JSON文件。`axios`是一个基于...
vue.js学习笔记:如何加载本地json文件
10-20
为了使Vue.js应用能够访问本地JSON文件，我们需要在`dev-server.js`中进行一些配置。首先，我们需要引入`data.json`文件。例如，在文件顶部添加以下代码： ```javascript var appData = require('../data.json'); `...
详解vue 模拟后台数据（加载本地json文件）调试
10-19
这篇文章将深入探讨如何使用Vue结合本地JSON文件来模拟数据。首先，我们需要创建一个本地的JSON文件，比如`data.json`，并将其放置在项目的合适位置，通常是在项目根目录下。 以下是一个简单的`data.json`示例： `...
【vue】vue-cli3中用axios访问本地json文件报错404
weixin_46682277的博客
04-13 1241
去访问时，却报错404了。文件保存到本地时，通过。
关于vue+elementui 访问本地json和跨域访问API问题。
qq_45960397的博客
09-26 851
关于vue+elementui 访问本地json和跨域访问API问题。 npm准备 安装element 和axios //axios npm install axios -S //element npm install element-ui -S main.js import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'; import ax
vue脚手架搭建项目后npm install报解析JSON错误
shangc_的博客
11-20 504
今天在用vue脚手架搭建项目完成后，用npm install下载node-modules文件时报错 解决方法： 1，首先执行npm cache clean --force 命令 2， 再执行 npm install 命令 3， 此时npm run dev就能运行了 ...
踩坑记录：vue引入json文件报路径错误
夏夜追凉丶的博客
10-10 1204
踩坑记录：vue引入json文件报路径错误，但是路径明明没有问题
Vue-cli3调取本地json报错404
Suger_Z
07-05 559
vue-cli2.0升级到vue-cli3.0之后删除了vue.config.js、和static静态文件目录 所以在调取本地json文件时候回报错404 在vue-cli3中只需要把json文件直接放在public文件目录下即可直接调用，如图： 文件目录： 路径： ...
@vue-cli3 build生成的dist文件在本地打开失败
qq_38682174的博客
06-04 1646
1、如果说双击打开本地 dist 文件夹里面的 index，浏览器窗口一片空白，如下图所示：
在 vue 中请求本地 json 数据一直 404 的解决办法
threewhisky的博客
04-13 2988
问题 在做项目的过程中，用 axios 以相对路径写法访问本地 json 数据一直404。 原理 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。 它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。 -------引自vue-cli 官网 HTML 和静态资源 所以原因是相对路径写法使得打包后的项目找不到文件路径。 解决办法 在用 axios 时使用绝对路
vue打包之后更改配置的json文件无效
相濡以沫不如相望于江湖，是望着你不是忘了你。
08-16 3046
在project.config.json里面更改配置后不生效，具体原因还没有找到。然后把这个js文件引入到public/index.html下。在项目中就可以直接使用window.api进行使用。把json文件换成js文件。这是目前我找到的办法…...
Vue中读取使用本地json数据,及打包后的访问问题
dakache11的博客
12-18 1万+
vue项目中访问本地json能避免，因服务器原因请求速度很慢很慢， 1.首先建立一个json文件，放到static文件下，要保持是正确的json格式，例如，或者你只有data里面的数据就行，我这是从接口返回的数据直接粘贴过来的 { "msg": "success", "code": 0, "data": { "activityPrize": [ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨埃LUO定

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值