vue-resource 获取本地json数据404问题的解决

Vue-resource 是Vue.js官方提供的一个数据请求插件，可以方便地进行数据的请求和响应。在使用vue-resource时，经常会遇到获取本地json数据时出现404错误的问题，接下来我将详细讲解如何解决该问题。

1. 问题描述

使用vue-resource请求本地json数据时，页面在访问数据时会报404错误，无法正常获取数据。

1. 解决方案

步骤一：使用本地服务器

由于浏览器的同源策略限制，通过http请求本地的文件会出现跨域问题，会导致404错误的出现。可以通过在本地启动一个服务器来解决该问题。下面提供两种方式。

方法一：使用Node.js中的http-server

安装http-server：在终端中输入 npm install http-server -g

使用http-server启动本地服务器：在终端中输入 http-server -p 端口号

例如： http-server -p 8080

在Vue项目中将请求地址改为“http://localhost:端口号/文件路径”即可正常访问本地json数据。

示例：

this.$http.get('http://localhost:8080/test.json').then(response => {
  console.log(response.body)
}, err => {
  console.log(err)
})

方法二：使用Vue-cli中的devServer

在Vue-cli中，可以通过在webpack配置文件中添加devServer选项来启动本地服务器。

在config/index.js中添加如下代码：

dev: {
  // ...
  devServer: {
    before(app){
      app.get('/api/test', function(req, res){
        res.json({
          "data":[{
            "title": "test",
            "content": "test",
            "date":"2018-11-11"
          }]
        })
      });
    }
  }
}

其中/api/test表示请求地址，请求时只需使用 /api/test 即可。

示例：

this.$http.get('/api/test').then(response => {
  console.log(response.body.data)
}, err => {
  console.log(err)
})

步骤二：使用require导入数据

另外一种解决方法是通过Node.js中的require方法将json数据导入到Vue组件中。

在Vue组件中使用require导入json文件：

import jsonData from './test.json'

示例：

import jsonData from './test.json'

export default {
  data () {
    return {
      jsondata: jsonData
    }
  }
}

1. 总结

以上就是 “vue-resource 获取本地json数据404问题的解决”的解决方案了，主要是通过使用本地服务器或者使用require方法导入数据来解决该问题。在实际开发中，建议使用本地服务器的方式来解决问题，这也是常用的解决方法。