Vue最新脚手架如何请求到json？

最新推荐文章于 2024-05-13 18:38:18 发布
最新推荐文章于 2024-05-13 18:38:18 发布
阅读量410 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sslcsq/article/details/106223622
版权

目前用到vue最新脚手架的伙伴别管他是3.x还是4.x…在请求json文件时会发现报404如何解决？
这个json在我们mock数据，或者自己写json数据的时候，还是很关键的

首先呢在public里面创建json文件，然后在组件中的引入需要更改一下？
重点来了，直接看代码，一看就会

在这里插入图片描述
这里直接把请求的绝对路径换成端口号就ok了完美解决~

sslcsq
关注
React基础之脚手架（四）- 数据请求与json server
Q_do_it的博客
08-21 404
脚手架 - 数据请求与json server 麒麒（小姐姐哦）来啦！！！今天的内容是`数据请求与json server` 代码是看不会的！！！~~~ 一定要动手呦！ 如果对你有帮助 就支持下我呦！♥ 一、插件下载 json-server：模拟数据 npm i json-server -g axios：数据请求 npm i --save axios 二、使用步骤 在项目根目录下新建文件夹 mock 在mock中新建data.json，然后定义数据，如：{ "arr": [ {"
基于vue脚手架3创建的项目，请求本地JSON数据的方法
Anana13的博客
05-23 892
将JSON文件放在项目的public文件夹下 在组件中发请求的URL写为：http://localhost:8080/xxx.json this.axios.get('http://localhost:8080/city.json') .then((response) => { console.log(response.data) } }) 3.在浏览器中检查是否获取到数据 ...
Vue-cli 脚手架一
weixin_49555741的博客
06-10 1575
目录1. 介绍1.1 说明1.2 安装 1.3 分析vue 脚手架1.3.1 子文件1.3.2 src 文件夹 1.3.3 public 文件夹1.4 render 函数1.5 脚手架的默认配置1.6 ref 属性1.7 props 父传子参数 1.8 mixin 混入1.8 插件1.9 scoped 样式 2. ToList案例2.1 组件化编码流程（通用）2.1.1 静态组件2.1.2 初始化案例2.1.3 交互 2.2 案例总结在电脑左下角的搜索框输入cmd，进入命令行一、防止下载慢可以配置npm
2024年Vue 脚手架 搭建，2024年最新2024最新大厂前端面试真题解析
2401_84617969的博客
05-10 113
(img-ysLbyGuJ-1715352646380)]**《350页前端校招面试题精编解析大全》**内容大纲主要包括。**《350页前端校招面试题精编解析大全》**内容大纲主要包括。
2024年前端最新Vue脚手架搭建以及创建Vue项目流程_脚手架创建vue项目(3)，阿里面试套路
最新发布
2401_84411767的博客
05-13 872
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
详解vue-cli 脚手架项目-package.json
12-08
使用vue-cli脚手架新建的项目中，含有package.json。 package.json是npm的配置文件，里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。 { "name": "vue-manage", // 项目名称 ...
vue脚手架的项目与json-server结合.docx
10-04
- 在 Vue 应用中，使用 `fetch` 或 `axios` 等库发送请求，例如 `fetch('/api/books')` 或 `axios.get('/api/books')`，实际请求会被代理到 JSON-Server。 这种工作流程极大地简化了前端开发过程，使前端开发者...
vue组件+db.json+element ui优化界面
03-20
vue 项目答辩使用vue技术db.json还有用了vue 脚手架，用了element ui优化界面使用了，包括登录页面，班级主页，班级相册，班级新闻，成员管理，网页中使用了vue+Element Ui+db.json技术，利用了数据共享技术，内容...
vue移动端脚手架
05-07
在这个基于 Vue CLI 3.0 的移动端脚手架中，我们可以发现以下关键知识点： 1. **Vue CLI 3.0**： - **快速设置**：Vue CLI 3.0 提供了一键创建项目的能力，通过`vue create`命令，开发者可以迅速搭建起一个包含...
vue脚手架(2022年9月份nodejs16.17.0版本)
红目香薰
09-14 7629
vue vue脚手架 vue脚手架搭建 vue脚手架(2022年9月份nodejs16.17.0版本) vue示例 vue路由 axios示例
vue请求本地自己编写的json文件的方法
01-21
1.第一步，这是目录结构 2.接下来是build/webpack.dev.conf.js文件需要配置的内容 代码： //vue配置请求本地json数据 const express = require('express') const app = express() const appData = require('../static/major_info.json')//加载本地json文件 const majorlist = appData.contents;//获取本地对应数据 const apiRoutes = express.Router() app.use('/api',api
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-cli构建的项目中如何引入json数据文件？
xm2by的博客
11-28 6285
如何在vue项目中引入json数据文件？ 方法1： 可能会出现的问题： 方法2： 参考文献： [1]
两种方式调用本地json文件（基于Vue-cli3脚手架）
xiecheng1995的博客
07-17 6068
在前端开发过程中，当后台服务器开发数据还没完善，无法与前端进行交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。 vue-cli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件，然而vuecli3、4没有static文件夹了。若创建一个static文件夹在下面存放json文件，在实际调用过程中会报错，提示请求404。因此本文将提供两种方法调用本地的json文件。 1. 利用Axios请求调用本地json文件 Vue cli3
Vue_day02
Funny_Chou的博客
11-01 293
Vue_day02
【精讲】vue框架 vue脚手架多种方法安装（教程）及注意事项、系统安装时操作代码
m0_59505309的博客
08-03 1716
【精讲】vue框架 vue脚手架多种方法安装（教程）及注意事项、系统安装时操作代码
vue-cli（vue脚手架）超详细教程
热门推荐
YinXiaobo
12-14 6万+
之前整理的一篇 vue-cli 新手教程，出乎意料意外的达到了 9W+ 的点击量，诚惶诚恐，为了让更多小伙伴有更好的体验，所以特意整理了这个新版本的。 vue2是对新手很友好的MVVM框架，有完善的官方中文文档，阅读起来也非常容易理解，由浅入深，示例完整。同时官方也提供了一个开箱即用的 vue-cli 帮我们生成一个完整的项目框架。 vue.js 著名的全家桶系列, 包含了， vue-route...
配置安装最新的Vue脚手架
weixin_45842733的博客
03-05 320
1、安装nodejs 下载 | Node.js 中文网 测试nodejs 是否安装 使用win + R 在运行界面输入 cmd 回车 在终端输入node -v 查看nodejs 是否安装 2、 配置下载源—全局安装nrm 设置淘宝镜像 2.1、永久使用 npm config set registry https://registry.npm.taobao.org 这样配置以后都是用淘宝的镜像下载资源 国内的访问速度会比较快 2....
Vue2.0脚手架Webpack配置深度解析
"详解vue2.0脚手架的webpack配置文件分析" Vue 2.0 脚手架，也即 Vue CLI 2.0，是基于 Webpack 的项目构建工具，它极大地简化了 Vue.js 应用程序的初始化和构建过程。Vue CLI 2.0 使用的Webpack配置文件结构清晰，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值