本文提供了一种在前端联调中使用 Vue.js 的mock技术，以明确划分前后端责任界限，避免不必要的相互指责。在面对陌生甲方的后端联调时，后端经常以前端未完成联调为由推卸责任，但实际上，后端问题或权限问题才是关键。因此，引入mock技术显得尤为重要。
具体操作如下：
首先，在项目前端根目录的cmd中安装mock.js。然后，在src文件夹中手动创建mock文件夹，并在其中创建mock.js文件，编写假数据结构和接口定义。在main.js中引入mock.js文件。
若需调整vuex部分的api地址，应将其改为mock的端口。在src文件夹内创建http文件夹，并在其中创建api.js文件，编写axios拦截器。
搭建mock服务器的步骤如下：
使用npm run dev命令启动Vue项目，同时在同层新开cmd窗口，全局安装mock服务器，然后启动mock服务器（注意路径可能需要调整）。vue项目在预览页面的URL后添加端口号“9999”和接口名称，即可预览mock服务器中的假数据。
通过上述方法，前端可以在页面中正常显示数据，从而避免了前端调用API出现问题时被指责的情况。此技术方案由军需官@yokel提供指导。
本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。
热心网友
回答时间：2024-12-31 10:18
