【错误总结】axios请求本地 Json

最新推荐文章于 2025-10-06 10:37:50 发布

原创最新推荐文章于 2025-10-06 10:37:50 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #vue.js

这篇博客介绍了如何在Vue项目中配置mock文件夹，用于存放模拟数据，并通过vue.config.js设置devServer的before方法，响应不同API请求，返回对应的JSON数据。同时展示了在Vue组件中使用$axios获取这些模拟数据的方法。

结构目录

在这里插入图片描述
将模拟的数据存储在mock文件夹下配置vue.config.js

const login = require('./src/mock/login.json')
const sort = require('./src/mock/sort.json')
const city = require('./src/mock/city.json')
const classify = require('./src/mock/classify.json')
const shop = require('./src/mock/shop.json')
const address = require('./src/mock/address.json')
const merchant = require('./src/mock/merchant.json')
const grade = require('./src/mock/grade.json')
module.exports = {
    devServer: {
        before: (app) => {
            app.get('/login', function (req, res, next) {
                res.json(login)
            })
            app.get('/sort', function (req, res, next) {
                res.json(sort)
            })
            app.get('/city', function (req, res, next) {
                res.json(city)
            })
            app.get('/classify', function (req, res, next) {
                res.json(classify)
            })
            app.get('/shop', function (req, res, next) {
                res.json(shop)
            })
            app.get('/address', function (req, res, next) {
                res.json(address)
            })
            app.get('/merchant', function (req, res, next) {
                res.json(merchant)
            })
            app.get('/grade', function (req, res, next) {
                res.json(grade)
            })
        }
    },
    // 关闭eslint检查
    lintOnSave: false,
};

请求数据

new Vue({
	methods:{
		getData() {
      		this.$axios({
	        url: "sort",
	        method: "get",
	        contentType: "application/json",
	        dataType: "jsonp",
	    })
	       .then((data) => {
	       		this.filterData = data.data;
	       })
	       .catch((error) => error);
    },
	}
})

【 错误总结 】axios请求本地 Json

结构目录

请求数据

【错误总结】axios请求本地 Json