vue-cli3里面使用axios去请求public里面的数据

最新推荐文章于 2025-05-20 16:41:11 发布
最新推荐文章于 2025-05-20 16:41:11 发布
阅读量3.1k 收藏 1
点赞数 3
CC 4.0 BY-SA版权
分类专栏： aixos vue-cli 文章标签： axios请求静态文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43653325/article/details/90288791
博主使用axios请求静态文件时遇到报错，先是报404和跨域错误，还为此配置了proxy，后来发现并非跨域问题，而是请求路径/file前多加了一个点，给出了正确格式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

恨不得要去咬这个axios, 如果它有实体的话, @@#!!!
之前一直给我报404 又给我报跨域错误, 害我之前去配置了一个proxy…
后来发现, 完全不是跨域问题, 就是 /file 的前面多加了一个点
正确格式如下:

import axios from "axios";
axios.get('/file/map.json').then(res=>{
      console.log(res,"create里面");  
  })

在这里插入图片描述
在这里插入图片描述

Vue3通过axios来读取本地json文件
King Saj
09-17 4710
前言 一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景，这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取。 本人在项目开发中，要实现地图的下钻功能，将各省市的json下载到了本地静态资源包中，结果请求时总是报错404 正题 前端存放JSON文件的位置 我们的项目是通过vue-cli3创建的，vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹)，这里本地json文件也应该放在这里 请求JSON数据 直接
vue2中axios下载public文件夹下的文件
qq_45083002的博客
07-12 941
axios下载exe文件等方法
前端读取本地项目中 public/a.xlsx 文件中的数据 vue3
最新发布
Dnn01的博客
05-20 487
前端读取本地项目中 public/a.xlsx 文件中的数据 vue3
vue-cli3.x项目axios调用本地json数据
qq_27868533的博客
11-12 713
今天各种尝试用axios调取本地的json文件，发现都是404，明显路径不对，瞎折腾了一下午才发现vue-cli3的index.html是再public文件夹下，所以"/"对应的路径就是public文件夹，只需要把json文件放到public文件夹下就可以了 axios.get("/xxxx.json") ...
Vue3.0中配置公共数据并完成axios网络请求工具的全局配置
m0_59345890的博客
09-21 1789
vue2.0使用公共配置时一般绑定在原型上无论是否使用都在每一个组件的this链上,这样的设计不太友好,因此我们在vue3.0中为我们提供了专门公共数据配置的方式: globalProperties getCurrentInstance。rewrite: (path) => path.replace(/^\/api/, '/'), // 路径重写。target: 'http://127.0.0.1:7001', // 代理的目标地址。// port:"5173",//默认可以不写。
在vue中使用axios请求本地静态资源
qq_45669178的博客
08-29 4590
注：在vue 脚手架3.0中 vue暴露的静态资源要放在public中，才能请求到。 1、在public中存放静态资源 json格式数据如下： { "first":[ {"name":"啦啦啦","nick":"祈澈菇凉"}, {"name":"安安","nick":"坏兔子"}, {"name":"编程微刊","nick":"简书"} ] } 2、在vue页面或者组件中使用 <template> <div&gt
在vue-cli3中使用axios获取本地json操作
10-15
本文将详细介绍如何使用axios库在vue-cli3项目中获取本地JSON文件，以便于在开发环境中模拟真实的数据请求。 Vue CLI 3是Vue.js官方提供的一个脚手架工具，它提供了一种快速构建Vue应用的模板方式。在Vue CLI 3中，...
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + exp.zip
02-23
常见的文件和目录可能包括`src`（源代码）、`public`（静态资源）、`vue.config.js`（Vue CLI的配置文件）、`package.json`（项目依赖和脚本）、`database.sql`（MySQL数据库脚本）等。 在实际开发中，这个项目可能...
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
在使用Vue CLI 3开发Vue应用程序时，经常会利用public文件夹来存放静态资源文件，如图片、图标、HTML模板等。这些静态资源在开发环境下通常不会有任何问题，但一旦进行部署时，可能会遇到访问这些资源时返回404错误...
--Medi-Shopping-Mall-SystemDesign:1，vue.js实现前后台构建2，使用了sass语言编写页面cs样式3，使用vue-cli（vue脚手架）构建vue项目4，使用vue-router构建vue项目的路由，作为某些页面的布局5，使用element-ui作为项目ui的美化和辅助数据交互。其中在登陆以及注册中用到了其中的组件。6，使用vue-axios和axios请求本地的json布局。页面在建立vue实例的通过axios 7，使用了vuex对公共数据进行一个管理，每一个页面都
03-11
shop-system2 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 自定义配置 请参阅。
前端 封装axios接口调用api
shiyi_ersan的博客
03-08 159
vue封装axios
前端Vue使用axios请求
public_int_age的博客
12-02 270
前端Vue使用axios请求
vue3 访问 public 内文件
weixin_46243213的博客
10-07 7415
vue3 访问 public 内文件
vue引用public文件夹中文件
热门推荐
无心使然云中漫步
12-13 1万+
可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。
使用axios获取JSON文件数据（vue）
weixin_65314914的博客
08-07 5489
axios是一个基于Promise的HTTP客户端库，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，并提供了许多强大而且易于使用的功能，使得进行HTTP通信变得简单、直观和高效。axios的一些详细介绍：支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中都使用。这意味着你可以在多种前端和后端开发场景中统一使用axios进行网络请求。简单易用的API：axios提供了简洁、直观的API，使得发送HTTP请求变得非常容易。
如何访问public目录下的文件
m0_57236802的博客
11-10 2605
在Web开发框架（如React, Vue, Angular）中，当构建项目时，这些框架的构建工具会将所有的静态资源复制到构建输出目录中（通常是。目录是一个特殊的目录，用于存放静态资源，如图片、JavaScript文件、CSS样式表和其他需要直接通过浏览器访问的文件。目录的具体名称可能有所不同，例如在Create React App中，你将静态资源放在项目根目录下的。文件夹中，而在Vue CLI或Angular CLI中，你可能会将它们放在。请注意，根据你的开发环境或框架，如果文件位于子目录中，例如。
Vue3使用axios获取本地json文件
ByteZenith的博客
08-30 1547
以上就是在Vue3中使用axios来获取本地json文件的方法。通过这种方式，我们可以轻松地读取本地json文件的数据，并将其展示在Vue组件中。而对于本地的json文件，我们同样可以使用axios库来进行读取和处理。安装完成后，我们可以在Vue组件中引入axios，并通过axios发送请求来获取本地的json文件数据。生命周期钩子函数中使用axios发送GET请求来获取本地json文件的数据。在上面的代码中，我们首先引入了axios库，并在。接下来，我们在Vue组件中引入axios，并在。
Vue 中加载图片 public 和 src/assets 文件夹下的区别（踩坑）【转】
qq_42498352的博客
11-14 845
【代码】Vue 中加载图片 public 和 src/assets 文件夹下的区别（踩坑）【转】
关于axios获取本地数据失败问题(vue2)
weixin_58896221的博客
07-25 984
每个人的问题可能相同，但解决的办法可能不一样，既然这样解决了，就先这样测试。static文件夹下的就都试用了一下结果还是报错，数据写到了public,当然也有写到。报了这么一个错，就去网上查找。然后就把pubilc去掉。之后就可以正常显示了，...
vue-cli3结合vant与postcss-px2rem的移动端开发实战
"本文档详述了如何使用vue-cli3、 vant UI组件库以及postcss-px2rem来构建和适配移动端页面的过程。" 在移动端应用开发中，选择合适的框架和技术栈至关重要。本示例选择了`vue-cli3`作为项目脚手架，它提供了快速...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值