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

最新推荐文章于 2024-01-30 09:27:58 发布
最新推荐文章于 2024-01-30 09:27:58 发布
阅读量2.9k 收藏 1
点赞数 3
分类专栏： aixos vue-cli 文章标签： axios请求静态文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43653325/article/details/90288791
版权

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

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

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

@玩Go那个玩!
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-cli3使用 DllPlugin 实现预编译提升构建速度
10-17
Vue CLI 3 是一个强大的脚手架工具，用于快速搭建基于 Vue.js 的项目。随着项目的增大，构建速度可能会变得缓慢，这会影响开发效率。为了优化这一问题，开发者可以利用 Webpack 的 DllPlugin 进行预编译，将常用且不...
Vue-cli assets SubDirectory及PublicPath区别详解
10-14
Vue CLI 是一个强大的工具，用于快速搭建 Vue.js 应用程序。在开发过程中，我们经常需要处理静态资源的路径问题，特别是当项目涉及到前后端分离时。`assetsSubDirectory` 和 `assetsPublicPath` 是 Vue CLI 中两个...
vue项目在public中编写一个json文件 并用http请求获取 模仿数据接口
最新发布
weixin_45966674的博客
01-30 895
然后 发了个get请求 地址直接写 city.json 因为在 public 目录下 我们直接写名字是可以请求到资源的。我们前后端分离是经常存在 前端已经开发到需要接口 但后端还没开始的情况的。这里 我用的 axios请求 如果这都没接触过 建议还是先去了解一下。我们可以 直接在 public 静态资源目录下创建一个json文件。这里 明显是将我们写的数据给要回来了。我这个json文件的内容是这样写的。// 下载过程中出现错误的处理。// 处理下载的文件数据。// 下载完成后的处理。
Vue3通过axios来读取本地json文件
King Saj
09-17 4483
前言 一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景，这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取。 本人在项目开发中，要实现地图的下钻功能，将各省市的json下载到了本地静态资源包中，结果请求时总是报错404 正题 前端存放JSON文件的位置 我们的项目是通过vue-cli3创建的，vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹)，这里本地json文件也应该放在这里 请求JSON数据 直接
vue-cli3.x项目axios调用本地json数据
qq_27868533的博客
11-12 635
今天各种尝试用axios调取本地的json文件，发现都是404，明显路径不对，瞎折腾了一下午才发现vue-cli3的index.html是再public文件夹下，所以"/"对应的路径就是public文件夹，只需要把json文件放到public文件夹下就可以了 axios.get("/xxxx.json") ...
vue2中axios下载public文件夹下的文件
qq_45083002的博客
07-12 784
axios下载exe文件等方法
在公共js中使用axios
你是人间四月天
09-19 6120
在public.js中 import axios from 'axios'; const web_url = 'http://www.zhangsan.com'; export function getDept() { let arr = []; axios.get(web_url + '/comboboxDept2', { params: { p...
在vue中使用axios请求本地静态资源
qq_45669178的博客
08-29 4269
注：在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中，...
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端 封装axios接口调用api
shiyi_ersan的博客
03-08 116
vue封装axios
vue3 访问 public 内文件
weixin_46243213的博客
10-07 5114
vue3 访问 public 内文件
vue引用public文件夹中文件
无心使然云中漫步
12-13 6254
可以看到，虽然有警告，但是/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 4642
axios是一个基于Promise的HTTP客户端库，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，并提供了许多强大而且易于使用的功能，使得进行HTTP通信变得简单、直观和高效。axios的一些详细介绍：支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中都使用。这意味着你可以在多种前端和后端开发场景中统一使用axios进行网络请求。简单易用的API：axios提供了简洁、直观的API，使得发送HTTP请求变得非常容易。
如何访问public目录下的文件
m0_57236802的博客
11-10 1620
在Web开发框架（如React, Vue, Angular）中，当构建项目时，这些框架的构建工具会将所有的静态资源复制到构建输出目录中（通常是。目录是一个特殊的目录，用于存放静态资源，如图片、JavaScript文件、CSS样式表和其他需要直接通过浏览器访问的文件。目录的具体名称可能有所不同，例如在Create React App中，你将静态资源放在项目根目录下的。文件夹中，而在Vue CLI或Angular CLI中，你可能会将它们放在。请注意，根据你的开发环境或框架，如果文件位于子目录中，例如。
关于axios获取本地数据失败问题(vue2)
weixin_58896221的博客
07-25 846
每个人的问题可能相同，但解决的办法可能不一样，既然这样解决了，就先这样测试。static文件夹下的就都试用了一下结果还是报错，数据写到了public,当然也有写到。报了这么一个错，就去网上查找。然后就把pubilc去掉。之后就可以正常显示了，...
VUE中axios请求本地json，报404
yueyekkx的博客
04-22 3371
刚接触vue不是很熟，这个问题一直困惑很长时间。 vue cli2和vue cli3搭建的项目两种不同的目录结构； 一种有static目录；静态资源存放在static下 高版本没有static目录，有public目录；静态资源存放在public下 所以解决方案也不一样； 1、static版 axios.get("./static/json/map/100000.json", {}) ...
axios的使用，axios的get请求、post请求方式、put请求方式
qq_57423665的博客
04-20 489
axios (发音：艾克C奥斯)是前端圈最火的、专注于数据请求的库。react/vue官方都推荐使用axios发送ajax请求，是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
React中使用axios来获取json文件
chenqk_123的专栏
10-24 4758
在项目开发中，可能需要读取本地json文件，需要将json文件放到public文件夹下才能获取到，在src中是获取不到的。 形如我在src下的某个模块下，使用axios获取json文件或者其他log文件，需要将文件存放到public下 这样才能获取到文件中的内容： ...
vuecli3 生产开发测试环境以及输出文件目录打包配置
06-06
好的，以下是对应的配置： 1. 生产环境配置： 在`package.json`文件中，添加如下命令： ``` "build": "vue-cli-service build --mode production" ``` 在根目录下创建`vue.config.js`文件，配置如下： ```javascript module.exports = { // 配置生产环境的打包输出目录 outputDir: 'dist', // 配置生产环境的publicPath publicPath: '/', // 打包时不生成.map文件，减少打包体积 productionSourceMap: false, // 生产环境下的webpack配置 configureWebpack: config => { // 在生产环境中使用CDN加速，减少打包体积 if (process.env.NODE_ENV === 'production') { config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'axios': 'axios', } } } } ``` 2. 开发环境配置： 在`package.json`文件中，添加如下命令： ``` "serve": "vue-cli-service serve --mode development" ``` 3. 测试环境配置： 在`package.json`文件中，添加如下命令： ``` "test": "vue-cli-service build --mode test" ``` 在根目录下创建`vue.config.js`文件，配置如下： ```javascript module.exports = { // 配置测试环境的打包输出目录 outputDir: 'dist-test', // 配置测试环境的publicPath publicPath: '/', // 打包时不生成.map文件，减少打包体积 productionSourceMap: false, // 测试环境下的webpack配置 configureWebpack: config => { // 在测试环境中使用CDN加速，减少打包体积 if (process.env.NODE_ENV === 'test') { config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'axios': 'axios', } } } } ``` 以上就是生产、开发和测试环境的配置，同时也可以通过`process.env.NODE_ENV`变量来区分不同的环境。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值