Vue Cli3.0 mock数据

1、public目录下新建mock文件夹，存放模拟数据.json文件；

image.png

public下的静态资源不经过webpack处理，能直接访问；

2、启动一个服务，访问.json数据（这里使用的是[使用python3启动服务](https://www.jianshu.com/p/af7aa6dc64f9

)）

启动服务

启动成功后，便能使用http://localhost:8080/Home.json能正确访问到.json数据。

3、在vue.config.js配置代理

module.exports = {
 devServer: {
        proxy: {
          '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/mock'
            }
          }
        }
      }
}

4、项目中使用mock数据
如.vue文件中使用Home.json:

    this.$axios
      .get("/api/Home.json")
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

//或，箭头函数写法
this.$axios
      //服务端接口
      .get("/api/Home.json")
      .then(response => {
          console.log(response);
        try {
        } catch (err) {
          console.log(err, 1);
        }
      })
      .catch(error => {});
  }

未完待续~

不定期整理小记~，(❤ ω ❤)