vue使用axios请求本地json文件

最新推荐文章于 2024-03-28 10:07:08 发布

前端小云儿

最新推荐文章于 2024-03-28 10:07:08 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端静态页面以及逻辑 vue优化文章标签： vue.js json javascript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/126056749

前端静态页面以及逻辑同时被 2 个专栏收录

150 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

vue优化

11 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用axios库来请求本地的JSON文件。首先，需要安装axios，然后在main.js中引入并配置代理。接着，创建一个JSON文件置于public目录下，最后在Vue组件中调用axios获取数据。

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

1 安装axios

npm install axios --save

2main.js引用

import axios from 'axios';
Vue.prototype.axios = axios

3 配置代理

module.exports = {

    devServer: {
        port: 8400,
        disableHostCheck: true,
        public: 'localhost:8400', // 本地ip
        //Z开发本地运行打开注释， 这一段不能提交到服务器。
        proxy: {
            '/api': {
                target: "http://localhost:8400",
                ws: true,
                pathRewrite: {
                    '^/api': '/',
                },
            },
        },
    },


}

4 新建一个json文件记得要在public下

project\demo001\public\j.json

{
  "first":[
      {"name":"王小婷","nick":"祈澈菇凉"},
      {"name":"安安","nick":"坏兔子"},
      {"name":"编程微

了解本专栏

超级会员免费看