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

最新推荐文章于 2024-10-13 09:05:12 发布

原创最新推荐文章于 2024-10-13 09:05:12 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍在使用Vue最新脚手架时，遇到请求JSON文件出现404错误的解决方案。通过在public目录下创建JSON文件，并调整组件中引入方式，将请求路径更改为端口号，即可轻松解决此问题。

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sslcsq

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

最全vue脚手架搭建教程

suny8的专栏

06-23

1337

Vue CLI是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+ webpack的项目模板。Vue CLI提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli3.x版本可以通过 vue create 命令快速创建一个新项目的脚手架，不需要像vue2.x那样借助于webpack来构建项目。

基于vue脚手架3创建的项目，请求本地JSON数据的方法

Anana13的博客

05-23

966

将JSON文件放在项目的public文件夹下在组件中发请求的URL写为：http://localhost:8080/xxx.json this.axios.get('http://localhost:8080/city.json') .then((response) => { console.log(response.data) } }) 3.在浏览器中检查是否获取到数据 ...

参与评论您还未登录，请先登录后发表或查看评论

React基础之脚手架（四）- 数据请求与json server

Q_do_it的博客

08-21

469

脚手架 - 数据请求与json server 麒麒（小姐姐哦）来啦！！！今天的内容是`数据请求与json server` 代码是看不会的！！！~~~ 一定要动手呦！如果对你有帮助就支持下我呦！♥ 一、插件下载 json-server：模拟数据 npm i json-server -g axios：数据请求 npm i --save axios 二、使用步骤在项目根目录下新建文件夹 mock 在mock中新建data.json，然后定义数据，如：{ "arr": [ {"

Vue-cli 脚手架一

weixin_49555741的博客

06-10

1715

目录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

Vue ——Vue Cli脚手架

weixin_45836841的博客

07-25

vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，执行 vue inspect >output.js。

2024年Vue 脚手架 搭建，2024年最新2024最新大厂前端面试真题解析

2401_84617969的博客

05-10

161

(img-ysLbyGuJ-1715352646380)]**《350页前端校招面试题精编解析大全》**内容大纲主要包括。**《350页前端校招面试题精编解析大全》**内容大纲主要包括。

详解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。这种工作流程极大地简化了前端开发过程，使前端开发者...

一个基础的vue2脚手架

03-11

Vue2脚手架是开发Vue应用的一个重要工具，它为开发者提供了一个预配置的基础环境，以便快速启动项目，而无需从零开始设置构建系统、打包工具以及第三方库。本脚手架已经集成了ElementUI，这是一个流行的Vue组件库，...

vue-cli2本地使用axios请求json数据教程

自学前端开发

04-23

324

1.找到在build下的 webpack.dev.conf.js 2.在里面编辑需要配置一下内容 const express = require('express') const app = express() const appData = require('../db.json') // 加载本地json文件 const seller = appData.movies_list // 获取对应本地数据 const apiRoutes = express.Router() app.use('/api'

vue脚手架(2024年9月份nodejs16

2401_84434954的博客

04-27

700

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化。

11-Vue脚手架

码字不易，大家的支持就是我坚持下去的动力

12-07

834

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。Vue脚手架的最新版本是4.x，这个版本和项目使用的Vue版本无关。全局安装脚手架：

Vue脚手架的安装（超详细篇，保姆级教程）

热门推荐

cfjbcg的博客

08-06

1万+

打开一下你刚刚的安装目录nvm，双击打开，找到settings.txt，然后用记事本编辑打开，复制粘贴。nvm install 14 nvm install latest // 安装最新版本node。-g的意识是全局安装，就-g和-s，-s是局部安装，就是只在当前项目可以使用。这边的安装版本可以跟我的一样，安装16.20.2和14.21.3的版本。可以看到这个就说明你刚刚安装的版本成功了！16版本的node就是跟着8版本的npm。14版本的node就是跟着6版本的npm。在这边进行项目的运行，快捷键。

2401_84411767的博客

05-13

979

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

2024年最全Vue脚手架（cli和vite详解），2024最新腾讯前端高级面试题总结

2401_84619432的博客

05-07

1265

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】1.nodejs环境(有的话可跳过)环境需要要先使用npm进行管理，而使用npm需要先下载nodejs。☞Nodejs下载地址中文官网1.1 下载根据自己电脑系统及位数选择，我的电脑是Windows系统、64位、想下载稳定版的.msi（LTS为长期稳定版）这里选择windows64位.msi格式安装包。

Vue脚手架安装(一套超详细的流程)

weixin_74941202的博客

05-23

8798

1.浏览器搜索node.js官网下载自己电脑系统所对应的版本号（我这里是windows11）,windows11以下的node.js的版本要更低一点。2.下载完成解压，点击安装，然后就是大家最喜欢的一键无脑点击next了，安装之前最好是先创建一个文件夹3.win+r输入cmd，在命令窗口分别输入 node -v 和 npm -v，出现了对应的版本号，恭喜你安装成功啦！

vue脚手架

2302_80406801的博客

10-13

954

可以通过。

探究Vue 的脚手架-详细版

pymxb1991的专栏

08-05

1606

从cli介绍到安装vue/cli 到vue-create xxx 创建项目详解 jsconfig.json 详解 package.json 详解 vue.config.js 详解 public 文件夹放置所有的静态资源把Vue 认识透彻

新版vue脚手架vue-cli的安装

Asher_lm的博客

12-19

2068

vue脚手架的安装

idea 使用脚手架搭建vue项目没有package.json