Vue项目使用mock数据的几种方式
本文是基于vue/cli 3.0创建的项目进行讲解
首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：
3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源，静态数据（如json数据、图片等）需要存放在这里。
放在
public目录下的静态资源可直接通过( http://localhost:8080/+ 文件名称)来访问，不需要在前面加一个/public路径- 3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建
vue.config.js进行配置。
方式一：使用mockjs插件实现本地mock数据
安装
mockjs插件npm i mockjs -DAI 代码解读在src目录下创建一个
mock文件夹，在mock文件夹下创建一个index.js和一个data文件夹（用于存放项目需要的模拟数据）. ├── src │ ├── mock │ │ └── data │ │ │ └── test.json │ │ └── index.js . .AI 代码解读mock目录下的index.js示例如下：const Mock = require('mockjs') // 格式： Mock.mock( url, 'post'|'get' , 返回的数据) Mock.mock('/api/test', 'get', require('./data/test.json')) Mock.mock('/api/test2', 'post', require('./data/test2.json'))AI 代码解读在
main.js入口文件中引入mock数据，不需要时，则注释掉require('./mock') // 引入mock数据，不需要时，则注释掉AI 代码解读最后，在vue模板中使用即可
axios.get('/api/test') .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); });AI 代码解读
方式二：在public文件夹放mock数据（无需使用mockjs插件）
在
public文件夹下创建一个mock文件夹，用来存放模拟数据的json文件. ├── public │ ├── mock │ │ └── test.json . .AI 代码解读放在
public目录下的静态资源可直接通过( http://localhost:8080/ + 文件名称)来访问，不需要在前面加一个/public路径。
在
vue.config.js里进行路径配置，如下:module.exports = { devServer: { proxy: { '/api': { // 代理接口 target: 'http://localhost:8080', ws: true, // proxy websockets changeOrigin: true, // 是否开启跨域 pathRewrite: { // 路径重写 '^/api': '/mock' } } } } }AI 代码解读最后，在vue模板中使用即可
axios.get('/api/test.json') // 注意这里需要.json后缀 .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); });AI 代码解读
这方式貌似不支持
post请求，有待研究。
方式三：前端本地启动一个nodejs服务，vue项目向nodejs服务请求mock数据
创建一个node项目（为了方便，本例直接在vue项目根目录创建，当然也可以是其它任何地方）
. ├── 项目根目录 │ └── serve.js . .AI 代码解读serve.js示例const http = require('http') // url模块用于处理与解析 前端传给后台的URL，适用于get请求（不适用于post请求），详情参见文档 const urlLib = require('url') http.createServer(function (req, res) { const urlObj = urlLib.parse(req.url, true) // 注意：这里的第二个参数一定要设置为：true, query才能解析为对象形式,可以更加方便地获取key:value const url = urlObj.pathname const get = urlObj.query console.log(url) // 模拟的mock数据 const data = { "code": 200, "list": [ { "id": '0001', "name": "test" }, { "id": '0002', "name": "test2" } ] } // console.log(get.user) if (url === '/test') { // 接口名 res.write(JSON.stringify(data)) } res.end() }).listen(9000)AI 代码解读启动node服务
node serve.jsAI 代码解读配置
vue.config.js的proxy，解决跨域module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:9000', ws: true, // proxy websockets changeOrigin: true, // 是否开启跨域 pathRewrite: { // 路径重写 '^/api': '' } } } } }AI 代码解读最后，在vue模板中使用即可
axios.get('/api/test') .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); });AI 代码解读
总结
方式二目前来看只支持get方式请求，对于post请求还有待研究。方式三虽然也是一种实现方式，但实现起来比较麻烦。个人建议使用方式一，灵活、方便。
