axios 获取本地json

Question

vue获取本地json，一直404

文件位置

代码

 Vue.prototype.$http = axios

 this.$http.get('/src/api/testJson.json').then(response => {
                    console.log(response)
                }, response => {
                    // error callback
                })

Answer 1

你直接在浏览器访问http://localhost:8090/src/api...，看能不能访问

Answer 2

更改配置文件的地址映射表 /config/index.js

dev: {
    proxyTable: {
      '/api': 'http://localhost:3001',    // 将请求发送到本地server
    },
}

请求代码

axios.get('/api/amount').then(res => {
    this.amounts = res.data;
})

本地server index.js

const express = require('express')
const PORT = 3001
// prepare the server.
const app = express()
app.get('/api/amount', (request, response) => {
  response.json([
    {
      name: 'gourps',
      font_icon: 'fa-users',
      number: 456,
      cate: 'GROUPS'
    })
}
let port = PORT;
app.listen(port)

运行本地server

$ node index.js

Answer 3

把json放在src同级目录的static里面就行了。

Answer 4

404 是资源请求路径错了

你服务器的根目录在哪里？

有没有代理都会影响

Answer 5

请确保前后台的接口一致，如果用前台请求的URI放到浏览器都访问不到对应的json，只能说明接口没对上

Answer 6

你放在静态文件夹里面应该就没问题了
之前有看到过大神说过这个问题

Answer 7

你需要用express添加一个访问静态资源的可用目录。
如：app.use('/api', express.static('./src/api'))

然后这么写
this.$http.get('/api/testJson.json')

Answer 8

请问app.use('/api', express.static('./src/api'))这句是在哪里做呢？