@vue/cli4(包括3)项目axios请求获取本地json文件数据

本文主要是介绍@vue/cli4(包括3)项目axios请求获取本地json文件数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在前端开发过程中,当后台服务器开发数据还没完善,无法与我们交接时,我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。
vuecli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件,vuecli3、4没有static文件夹了,那咋办?有人说我创一个static文件夹在下面继续写json文件不就行了。但结果会报错,请求404找不到文件。

1. @vue/cli已经默认将静态文件改存在public文件夹下了。
static文件夹在配置中已经识别不出了。我们在public文件夹下编写json文件作为模拟数据:
在这里插入图片描述
2. 项目安装axios,导入axios,创建get()异步请求:
在这里插入图片描述
这里可能会有朋友疑问了,诶?请求路径不应该是'public/data/xx.json'吗?注意了如果路径这样写反而会报错404找不到。

3. 转发api路径代理设置。
开发情况下我们像上面这样改写路径其实是不合理的,默认我们将相对路径写为'/api/xxx',那如何将/api指向实际的数据文件路径,实现转发?旧版本下我们会在vue.config.js下配置proxy属性,但新版本这个js文件已经不在目录下了,我们需要手动创建。

//在根目录下创建vue.config.js,如下配置:
module.exports = {devServer: {proxy: {  '/api': {target: 'http://localhost:8080', //路径指向本地主机地址及端口号ws: true, changeOrigin: true,pathRewrite:{'^/api': '/data' //路径转发代理}}}}}

4. 将axios请求路径更改为/api。
在这里插入图片描述
做完以上步骤和避开雷区,已经可以成功在vuecli3、4版本项目上请求到本地json文件的数据了。等到和后台对接时,只要和后台工作人员确认好数据所在的主机地址端口号和存放路径,更改vue.config.js文件配置即可。

这篇关于@vue/cli4(包括3)项目axios请求获取本地json文件数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/770112

相关文章

批量导入txt数据到的redis过程

《批量导入txt数据到的redis过程》用户通过将Redis命令逐行写入txt文件,利用管道模式运行客户端,成功执行批量删除以Product*匹配的Key操作,提高了数据清理效率... 目录批量导入txt数据到Redisjs把redis命令按一条 一行写到txt中管道命令运行redis客户端成功了批量删除k

精选20个好玩又实用的的Python实战项目(有图文代码)

《精选20个好玩又实用的的Python实战项目(有图文代码)》文章介绍了20个实用Python项目,涵盖游戏开发、工具应用、图像处理、机器学习等,使用Tkinter、PIL、OpenCV、Kivy等库... 目录① 猜字游戏② 闹钟③ 骰子模拟器④ 二维码⑤ 语言检测⑥ 加密和解密⑦ URL缩短⑧ 音乐播放

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因:Dao未注册为Bean,解决:在启... 目录错误描述原因解决方法总结***************************APPLICA编

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式(传统格式)1.

解决pandas无法读取csv文件数据的问题

《解决pandas无法读取csv文件数据的问题》本文讲述作者用Pandas读取CSV文件时因参数设置不当导致数据错位,通过调整delimiter和on_bad_lines参数最终解决问题,并强调正确参... 目录一、前言二、问题复现1. 问题2. 通过 on_bad_lines=‘warn’ 跳过异常数据3

Python进行JSON和Excel文件转换处理指南

《Python进行JSON和Excel文件转换处理指南》在数据交换与系统集成中,JSON与Excel是两种极为常见的数据格式,本文将介绍如何使用Python实现将JSON转换为格式化的Excel文件,... 目录将 jsON 导入为格式化 Excel将 Excel 导出为结构化 JSON处理嵌套 JSON:

python运用requests模拟浏览器发送请求过程

《python运用requests模拟浏览器发送请求过程》模拟浏览器请求可选用requests处理静态内容,selenium应对动态页面,playwright支持高级自动化,设置代理和超时参数,根据需... 目录使用requests库模拟浏览器请求使用selenium自动化浏览器操作使用playwright

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi

Python获取浏览器Cookies的四种方式小结

《Python获取浏览器Cookies的四种方式小结》在进行Web应用程序测试和开发时,获取浏览器Cookies是一项重要任务,本文我们介绍四种用Python获取浏览器Cookies的方式,具有一定的... 目录什么是 Cookie?1.使用Selenium库获取浏览器Cookies2.使用浏览器开发者工具

Java获取当前时间String类型和Date类型方式

《Java获取当前时间String类型和Date类型方式》:本文主要介绍Java获取当前时间String类型和Date类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录Java获取当前时间String和Date类型String类型和Date类型输出结果总结Java获取