Vue Cli 3.0中使用axios请求本地JSON数据

网上方法千千万，由己验明知真假。———— 只灯片笺（简书ID）

本文主要内容：
1. Vue Cli 3.0使用axios请求本地JSON数据，出现404错误；
2. 能请求到数据的方法①；
3. 能请求到数据的方法②；

1. Vue Cli 3.0 使用 axios 请求 本地JSON 数据，出现 404 错误

错误内容如下：

Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:59)

404错误.png

2. 能请求到数据的方法①

// 引入json文件；
const data = require('./public/test');
......
......
devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
        },
        before: app => {
            /* /test/a  是后面请求本地数据的url填写的内容，类似于请求接口；
             * data这个自己设定的变量，内定了json文件的路径；
             * 在api里面请求数据的data的时候，会自动帮忙转发到localhost:8080/test/a
             */
            app.get('/test/a', (req, res) => {
                res.json(data);
            })
        }
    }

methods: {
            getData1() {
                axios1.get(
                    'http://localhost:8080/test/a'
                ).then((response) => {
                    // 200响应
                    // console.log(3333);
                    // console.log(response);
                }, (err) => {
                    // 500响应
                    console.log(4444);
                    console.log(err);
                })
            },
        },
        created() {
            this.getData1();
        },

第一种本地json请求方式.png 打印数据.png json数据.png

---

3. 能请求到数据的方法②

因为cli3.0生成的项目，静态文件变成了public文件。所以，本地的json放在此目录下或者此静态资源目录public的 js, css, img, fonts下即可。请求的时候，如果还有目录级，则加上，没有则空着不写；

目录结构.png

// 此处以ttt.json为例。如果是test.json则url为/test.json；
methods: {
            getData() {
                this.$http({
                    method: 'GET',
                    url: '/js/ttt.json',
                }).then((response) => {
                    // 200响应
                    // console.log(1111);
                    // console.log(response);
                }, (err) => {
                    // 500响应
                    console.log(2222);
                    console.log(err);
                })
            },
        },
        created() {
            this.getData();
        },

第二种本地json请求方式.png 打印数据.png json数据.png