vue在项目中使用mock数据

1，安装配置axios

• npm install axios --save 安装axios到项目中
• 在main.js中全局注册axios

// 全局注册axios
import axios from 'axios'
Vue.prototype.$axios = axios

2，创建mock文件，在vue项目中只能访问static文件夹下的文件，其它的都会跳到项目初始页面，因此mock文件夹要创建在static下面。结构为/static/mock/json.json
3，在需要获取数据的页面使用axios获取mock数据。

methods: {
  getReqData() {
      this.$axios.get('/static/mock/json.json').then(res => {
    console.log(res)
      })
    }
},
mounted() {
  this.getReqData()
}

4，上面的步骤已经可以获取到mock数据，但是如果每个页面的请求都以这种方式，在之后如果要换真实数据替换mock数据就会很麻烦，因此可以通过webpack提供的转发机制proxyTable实现请求路径转发。找到根路径config目录下的index.js文件修改proxyTable如下:

proxyTable: {
      '/api': {
         target: "http://localhost:8080",
         pathRewrite: {
              '^/api': '/static/mock'
         }
       }
}

设置完配置文件要重启服务器才会生效。