前端跨域解决方案：https://yuanyu.blog.csdn.net/article/details/108948464 

开发阶段，为了高效率，需要提前Mock减少代码冗余、灵活插拔减少沟通、减少接口联调时间 npm i axios --save

1 本地创建json

本地创建json文件无法无缝切换到开发环境，应为json文件是写死了的

public/mock/user/userInfo.json

测试

---

2 easy-mock平台

easy-mock不稳定，如果能自己搭建使用这种方式时最好的，不建议使用线上的这个

https://easy-mock.com/https://github.com/easy-mock/easy-mock

// src/util/httpRequest.js import axios from 'axios' const http = axios.create({ timeout: 8000, }) // 后期只需要该这里就可以无缝切换到线上地址了 http.defaults.baseURL = 'https://easy-mock.com/mock/5f7e075546477f19b2848a6d/api'; http.defaults.timeout = 8000 export default http <!-- src/App.vue --> <template> <div id="app"> {{userInfo}} </div> </template> <script> import http from "./util/httpRequest"; export default { name: 'App', data() { return { userInfo: {} } }, mounted() { // 通过easy-mock平台实现数据mock http.get('/user/details').then(({data}) => { this.userInfo = data.data }) } } </script> <style> </style>

---

3 集成Mock API

Mock API有个特点，控制台是查看不到请求的，应为在请求在发出去之前就被拦截了

https://www.npmjs.com/package/mockjshttp://mockjs.com/https://github.com/nuysoft/Mock/wiki npm install mockjs --save

// src/mock/api.js import Mock from 'mockjs' Mock.mock('/api/user/details',{ "status": 0, "data": { "id|1001-11000": 0, "username": "@cname", "email": "admin@51purse.com", "phone": null, "role": 0, "createTime": 1479048325000, "updateTime": 1479048325000 } }) // src/util/httpRequest.js import axios from 'axios' // mock开关 const mock = true if (mock) { // 记得不要用import，import是预编译，require是需要执行到这里才会加载，不然永远都会拦截 require('../mock/api') } const http = axios.create({ timeout: 8000, }) http.defaults.baseURL = '/api'; http.defaults.timeout = 8000 export default http <!-- src/App.vue --> <template> <div id="app"> {{userInfo}} </div> </template> <script> import http from "./util/httpRequest"; export default { name: 'App', data() { return { userInfo: {} } }, mounted() { // 本地集成mockjs实现数据mock // 注意控制台看不到发送请求，发请求前就被拦截了 http.get('/user/details').then(({data}) => { this.userInfo = data.data }) } } </script>