vue请求本地自己编写的json文件的方法

vue请求本地自己编写的json文件的方法

• 这篇文章主要介绍了vue2.0版本请求本地自己编写的json文件，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

1. 第一步（在build/webpack.dev.conf.js文件里面需要配置的内容）
   
   代码如下：

//vue配置请求本地json数据
const express = require('express')
const app = express()
const appData = require('../static/goods.json')//加载本地json文件
const majorlist = appData.info;//获取本地对应数据
const apiRoutes = express.Router()
app.use('/api',apiRoutes)

2. 第二步（在build/webpack.dev.conf.js文件里面的devServer的内容）

代码如下：

 before (app) {
      　　app.get('/api/majorlist',(req, res) => {
      　　　　res.json({
      　　　　　　erron:0,
      　　　　　　data: majorlist
      　　　　})//接口返回json数据，上面配置的数据majorlist就赋值给data请求后调用
       　　})
       }

3. 第三步就是vue文件的请求写法（每个人的写法都不一样，我的仅供参考）

代码如下：

 created() {
    this.axios.get('/api/majorlist').then(response=>{
            console.log(response.data.data)
            this.arr=response.data.data
    }).catch(error=>{
        console.log("出错了"+error)
    })
  }

4. 最后再说一下，如果你没看懂第一步的获取本地对应数据的话，可以看看下面这张图
   

总结：
以上所述就是给大家介绍的vue请求本地自己编写的json文件的方法，希望对大家有所帮助。