Vue3使用axios获取本地json文件

Vue3使用axios读取本地JSON数据
最新推荐文章于 2024-05-10 23:04:10 发布
最新推荐文章于 2024-05-10 23:04:10 发布
阅读量1.6k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： json javascript 开发语言 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ByteZenith/article/details/132573825
js 专栏收录该内容
440 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了在Vue3项目中如何使用axios库获取本地json文件。首先通过npm或yarn安装axios，然后在Vue组件中引入并发送GET请求。在生命周期钩子`created()`或Vue3的`onMounted()`中调用axios，读取json文件内容，并将数据绑定到组件属性以显示数据。同时，文章也提到了错误处理和Vue3生命周期的变化。

Vue3使用axios获取本地json文件

在Vue3中，我们经常需要通过异步请求来获取服务器端的数据。而对于本地的json文件，我们同样可以使用axios库来进行读取和处理。

首先，我们需要在项目中安装axios库。可以使用npm或者yarn进行安装，命令如下：

npm install axios

或者

yarn add axios

安装完成后，我们可以在Vue组件中引入axios，并通过axios发送请求来获取本地的json文件数据。

假设我们有一个名为data.json的本地json文件，它的内容如下：

{
   
   
  "name": "John"
了解本专栏 订阅专栏 解锁全文
vue使用axios请求本地json文件
jieweiwujie的博客
07-29 3701
vue使用axios请求本地json文件
获取本地json文件
m0_50125215的博客
09-17 6310
获取本地JSON文件 请求报404错误,原因是vue-cli3.0之后创建的项目静态资源都放在了根目录下的public目录下，因此需要将json文件建在public目录下即可。
vue-cli3通过axios获取本地json数据，vue
q16974058的博客
03-29 1670
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！
vue3怎么读取本地json数据
蔡定交
03-24 3496
确保将path/to/your/local.json替换为你的本地JSON文件的实际路径。这段代码使用了Vue 3的Composition API，在组件被挂载时，它会尝试获取并解析本地JSON文件，然后将数据存储在一个响应式变量中，以便在模板中使用。在Vue 3中，可以使用fetch API或其他HTTP客户端来读取本地JSON数据。
Vue3通过axios来读取本地json文件
King Saj
09-17 4871
前言 一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景，这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取。 本人在项目开发中，要实现地图的下钻功能，将各省市的json下载到了本地静态资源包中，结果请求时总是报错404 正题 前端存放JSON文件的位置 我们的项目是通过vue-cli3创建的，vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹)，这里本地json文件也应该放在这里 请求JSON数据 直接
VUE3如何读取本地json文件
黑坑的专栏
11-08 1万+
VUE3如何读取本地json文件
vue-cli3通过axios获取本地json数据，vue，0基础web前端开发
m0_60707538的博客
04-02 827
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。
在vue-cli3中使用axios获取本地json操作
11-19
使用axios的get方法获取，不能用post，不然会报404 axios.get(`./china-main-city/100000.json`) .then((data) => { console.log(data) }) 补充知识：两个不同的路由，引入相同的组件 从不同的按钮进入到详情页...
vue使用axios获取本地json文件数据及创建本地数据接口
L20523的博客
12-25 5865
axios是前端必学的一个知识点，刚接触axios的同学可能会因为没有接口测试而犯难，本文教会你如何用axios获取本地json文件数据，以及创建本地数据接口。
Vue加载json文件的方法简单示例
01-21
本文实例讲述了Vue加载json文件的方法。分享给大家供大家参考，具体如下： 一、在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版)： var appData = require('../address.json'); // 引入address.json文件 var apiRoutes = express.Router(); apiRoutes.get('/address',function (req,res) { res.json({ errno:0, data:appData }); }); app.use('
vue2、vue3中使用axios请求本地json数据的详细过程
热门推荐
Jeasu_0908的博客
07-09 2万+
研究背景 在我们平常写demo的时候难免需要自己模拟一些数据去调用，那么如何请求本地的json数据呢，下面将要从0开始，讲一下请求本地json数据的详细过程，途中遇到的问题及解决方法 技术选型 我们选择那种方式来请求数据呢，是要根据当前项目环境来选择，一般来说常用的是jquery的$.getJSON( ) 方法 和 ajax/axios ,由于当前vue工程是由vue-cli搭建的，我们 选用axios去请求 步骤： 1、安装axios npm install axios --save 2、在main.j
vue3如何获取本地json文件和调用后端接口渲染数据(uniapp&vue3)
qq_48434912的博客
05-16 5074
值得注意的是由于ref原理上是使用proxy代理，所以在赋值时需要.value。
vue 项目如何读取本地json文件数据
2301_76433421的博客
02-09 1万+
Vue项目读取本地json文件数据的方法如下： 创建一个json文件，比如data.json，并保存在项目目录下的static文件夹里 在Vue组件中引入json文件，例如： <script> import data from '@/static/data.json' export default { data() { return { jsonData: data } } } </script> 在模板中使用json数据： <temp
2024年vue-cli3通过axios获取本地json数据，vue，2024年前端常见面试题
2401_84618926的博客
05-10 1068
最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。事实证明请求数据只能放在main.vue里面去请求，到它的子组件里面不可以请求到。“name”: “头等舱”
vue3 如何配置请求本地 json 数据
m0_53136368的博客
06-27 4207
1. 创建一个 JSON 文件，例如 `data.json`，并将其放置在 `public` 目录下。在 `public` 目录中的文件可以直接在浏览器中访问，无需经过编译。2. 在组件中使用 `fetch` 或 `axios` 等库来获取 JSON 数据。
《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用
weixin_58070962的博客
08-07 1441
vue3实战,Elementplus组件走马灯运用
axios请求本地json文件
懒羊羊懒羊羊
07-21 1962
【代码】axios请求本地json文件。
Vue 读取本地静态文件 json【2种方法及优缺点】
IT博客技术分享
11-01 5234
使用vue读取本地的静态文件。 方法一：require 格式： var json = require('文件的相对地址'); 优点：可以按照你写的顺序去执行，没有任何书写方面的局限。 缺点：当你打包的时候，它很可能被打包到 js 中去，出现这种情况基本就凉凉了。你的 js 超级大。网站基本无法访问。 解决：你的 js ，很大但是你可以把它cdn加速。这样虽然很方便，但是你的流量就会消...
可以使用axios读取本地json文件吗
最新发布
06-19
<think>我们有两个问题需要解决：1.解决Can&#39;tresolve&#39;axios&#39;错误2.如何使用axios读取本地JSON文件首先，针对第一个问题：Can&#39;tresolve&#39;axios&#39;根据之前的总结，这个错误通常是因为没有安装axios依赖，或者安装有问题，或者引入方式不对。步骤：1.确保已经安装了axios。在项目根目录下运行：npminstallaxios或者yarnaddaxios2.安装后，检查package.json文件中是否有axios的依赖项。3.在代码中正确引入axios：importaxiosfrom&#39;axios&#39;;4.如果安装过程中出现依赖冲突，可以尝试：npminstall--legacy-peer-deps5.如果之前安装失败，可以删除node_modules文件夹和package-lock.json（或yarn.lock）后重新安装。6.确保在需要使用axios的文件中正确导入。第二个问题：如何使用axios读取本地JSON文件在Vue项目中（使用vue-cli3及以上版本），静态文件应该放在public目录下（老版本是static目录）。例如，将JSON文件放在public/data.json，或者为了更好的组织，可以放在public/static/data.json。然后，我们可以通过axios请求这个文件。注意，在开发环境中，public目录下的文件会被作为静态文件提供服务，因此可以直接通过根路径访问。例如，文件放在public/data.json，则请求的URL可以是&#39;/data.json&#39;。如果放在public/static/data.json，则请求的URL是&#39;/static/data.json&#39;。示例代码：1.封装axios实例（可选，但推荐）：创建一个request.js文件（比如在src/utils/目录下）：```javascriptimportaxiosfrom&#39;axios&#39;;//创建axios实例constservice=axios.create({baseURL:&#39;&#39;,//可以设置为空，因为请求的是当前域下的资源timeout:5000//超时时间});//请求拦截器（根据需要添加）service.interceptors.request.use(config=>{//在发送请求之前做些什么，例如添加token等returnconfig;},error=>{//对请求错误做些什么returnPromise.reject(error);});//响应拦截器service.interceptors.response.use(response=>{//对响应数据做点什么，例如只返回数据部分returnresponse.data;},error=>{//对响应错误做点什么returnPromise.reject(error);});exportdefaultservice;```2.在需要请求JSON文件的组件或模块中：```javascriptimportrequestfrom&#39;@/utils/request&#39;;//根据你的路径调整//请求JSON数据request.get(&#39;/static/data.json&#39;).then(data=>{console.log(data);}).catch(error=>{console.error(error);});```注意：在public目录下的文件不会经过webpack处理，而是直接复制到输出目录（dist）。因此，如果你在构建后需要修改这些文件，可以直接在输出目录中修改。另外，如果在开发过程中遇到404错误，请确保：-JSON文件确实放在public目录（或public的子目录）中。-请求的URL路径与文件在public目录下的路径一致（注意大小写）。如果之前有配置过webpack的CopyWebpackPlugin（如引用[4]提到），在vue-cli3中通常不需要手动配置，因为public目录默认会被复制。但如果你修改了默认配置，可能需要检查。最后，如果解决了上述问题，应该可以成功请求。总结步骤：1.安装axios（解决Can&#39;tresolve&#39;axios&#39;错误）2.将JSON文件放入public目录（或子目录）3.使用axios发送GET请求，路径为`/文件名`（或子目录路径）如果按照以上步骤仍然遇到问题，请检查控制台是否有404错误，确保文件路径正确。下面我们给出一个完整的示例：假设项目结构：public/static/data.jsonsrc/utils/request.jsviews/SomeComponent.vue在SomeComponent.vue中请求：```javascriptimportrequestfrom&#39;@/utils/request&#39;;exportdefault{created(){this.loadData();},methods:{loadData(){request.get(&#39;/static/data.json&#39;).then(data=>{console.log(&#39;获取到的数据：&#39;,data);}).catch(error=>{console.error(&#39;请求失败：&#39;,error);});}}}```这样，就可以在组件创建时请求到本地的JSON文件。注意：在开发环境下运行（npmrunserve）时，public目录下的文件可以通过根路径访问。在生产环境构建后（npmrunbuild），public目录下的文件会被复制到dist目录，同样可以通过根路径访问。如果遇到跨域问题，因为请求的是本地文件（同源），所以不会出现跨域问题。如果问题仍然存在，请检查：-服务器是否运行正常（开发服务器）-JSON文件路径是否正确（尝试在浏览器中直接访问http://localhost:端口号/static/data.json，看是否能下载到文件）这样，两个问题应该都能得到解决。</think>### 解决 "Can&#39;t resolve &#39;axios&#39;" 错误并读取本地 JSON 文件 #### 一、解决 "Can&#39;t resolve &#39;axios&#39;" 错误 1. **安装 Axios 依赖** ```bash npm install axios # 或 yarn add axios ``` - ✅ 安装后检查 `package.json` 的 `dependencies` 中是否包含 `"axios"` 2. **验证安装** ```javascript // 测试文件 testAxios.js import axios from &#39;axios&#39;; console.log(&#39;Axios version:&#39;, axios.VERSION); ``` 3. **若安装失败** ```bash # 清除缓存并强制安装 npm cache clean --force npm install --save --legacy-peer-deps axios ``` #### 二、读取本地 JSON 文件（Vue CLI 项目） 1. **文件位置** - 将 JSON 文件放入 `public` 目录（vue-cli3+ 的静态资源目录） - 示例路径：`public/static/data.json` 2. **封装请求方法** ```javascript // src/utils/request.js import axios from &#39;axios&#39;; const service = axios.create({ baseURL: process.env.BASE_URL, // 自动匹配项目域名 timeout: 5000 }); export const getLocalJson = (path) => { return service.get(`/static/${path}.json`) .then(res => res.data) .catch(error => { console.error(&#39;JSON读取失败:&#39;, error); throw error; }); }; ``` 3. **组件中使用** ```javascript // Vue组件中 import { getLocalJson } from &#39;@/utils/request&#39;; export default { async created() { try { const data = await getLocalJson(&#39;data&#39;); // 读取 public/static/data.json console.log(&#39;获取的数据:&#39;, data); } catch (e) { // 错误处理 } } } ``` #### 三、常见问题解决 1. **404 错误处理** - 确认文件在 `public/static/` 目录下 - 检查文件名大小写（Linux 系统区分大小写） - 更新 `vue.config.js`（如有自定义配置）： ```javascript module.exports = { publicPath: &#39;./&#39;, assetsDir: &#39;static&#39; } ``` 2. **跨域问题** - 本地开发无需担心跨域，public 目录文件自动托管在根路径 - 生产环境确保 JSON 文件在部署后的 `static` 目录 3. **路径优化技巧** ```javascript // 动态路径（根据环境变量） const jsonPath = process.env.NODE_ENV === &#39;production&#39; ? &#39;/app/static/data.json&#39; : &#39;/static/data.json&#39;; ``` > **重要提示**：每次修改 `public` 目录文件后需重启开发服务器 `npm run serve`[^1][^3] --- ### 工作流程示意图 ```mermaid graph LR A[创建JSON文件] --> B[放入 public/static/] B --> C[封装axios请求] C --> D[组件调用getLocalJson] D --> E{成功？} E -- 是 --> F[使用数据] E -- 否 --> G[检查路径/重启服务] ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值