Vue CLI中利用json-server快速搭建mock数据接口教程

在Vue CLI项目中，使用json-server作为mock服务器是一种常用的方法，用于模拟后台数据接口，方便前端开发阶段的快速迭代和本地预览。以下是详细的步骤和配置方法： 1. **准备JSON数据文件**: - 在项目结构中，创建一个名为`mock`的文件夹，并在其中放置一个`db.json`文件。这个文件包含了模拟的数据，例如文章、评论等数据的结构，如下所示： ``` { "slides": [ { "src": "/static/img/right1.png", "title": "xxx1", "href": "#" }, ... ], "list": [ { "id": 1, "url": "#", "title": "文艺" }, ... ] } ``` 2. **全局安装json-server**: - 在终端或命令行中，使用npm全局安装json-server，确保其可用： ``` npm install -g json-server ``` 3. **启动json-server**: - 在项目根目录的`package.json`文件中，添加`scripts`字段，定义`mock`和`mockdev`命令，用于启动json-server并监听`db.json`变化： ``` "scripts": { "mock": "json-server --watch mock/db.json", "mockdev": "npm run mock & npm run dev" } ``` - 当运行`npm run mockdev`时，json-server会自动启动并在后台监听`db.json`文件的变化。 4. **配置Vue CLI dev-server**: - 打开`build/dev-server.js`文件，配置dev-server以代理请求到json-server，如需修改请求路径，这里设置为`http://localhost:3000`。这一步主要是在`app.use`函数中进行设置，具体代码可能会因项目结构和个人喜好而有所不同。 5. **启动项目与访问数据**: - 运行`npm run dev`来启动Vue CLI项目，此时项目将在localhost:8080上运行。通过地址栏输入`localhost:8081/posts`或`localhost:8081/comments`，前端应用将会访问到模拟的API数据。 6. **浏览器代理设置**: - 在`config/index.js`文件中，配置开发环境下的代理规则，将前端请求重定向到json-server。这有助于前端在开发环境中直接与mock服务器交互，无需担心跨域问题。 7. **验证**: - 完成以上步骤后，通过浏览器访问模拟数据，检查是否能正常获取到预期的数据结构，确认json-server已经成功地作为mock服务器工作。 通过这些步骤，你在Vue CLI项目中成功地使用json-server搭建了mock服务器，使得前端开发者可以在本地开发过程中快速预览和测试数据接口的效果。这是一种常用的开发模式，便于迭代和团队协作。