Vue 项目使用 mock 数据的几种方式

本文是基于 vue/cli 3.0 创建的项目进行讲解

首先我们来说一说 vue/cli 3.0 与 2.0 的一些不同：

1. 3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源，静态数据（如 json 数据、图片等）需要存放在这里。

   放在public目录下的静态资源可直接通过(http://localhost:8080/+ 文件名称)来访问，不需要在前面加一个/public路径

2. 3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建vue.config.js 进行配置。

方式一：使用 mockjs 插件实现本地 mock 数据

1. 安装mockjs插件

   npm i mockjs -D
   

2. 在 src 目录下创建一个mock文件夹，在mock文件夹下创建一个index.js和一个data文件夹（用于存放项目需要的模拟数据）

   .
   ├── src
   │   ├── mock
   │   │   └── data
   │   │   │   └──  test.json
   │   │   └── index.js
   .   .
   

3. 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"));
   

4. 在main.js入口文件中引入 mock 数据，不需要时，则注释掉

   require("./mock"); // 引入mock数据，不需要时，则注释掉
   

5. 最后，在 vue 模板中使用即可

   axios
   	.get("/api/test")
   	.then(function(res) {
   		console.log(res);
   	})
   	.catch(function(err) {
   		console.log(err);
   	});
   

方式二：在 public 文件夹放 mock 数据（无需使用 mockjs 插件）

1. 在public文件夹下创建一个mock文件夹，用来存放模拟数据的 json 文件

   .
   ├── public
   │   ├── mock
   │   │   └── test.json
   .   .
   

   放在public目录下的静态资源可直接通过(http://localhost:8080/ + 文件名称)来访问，不需要在前面加一个/public路径。

2. 在vue.config.js里进行路径配置，如下:

   module.exports = {
   	devServer: {
   		proxy: {
   			"/api": {
   				// 代理接口
   				target: "http://localhost:8080",
   				ws: true, // proxy websockets
   				changeOrigin: true, // 是否开启跨域
   				pathRewrite: {
   					// 路径重写
   					"^/api": "/mock",
   				},
   			},
   		},
   	},
   };
   

   devServer.proxy 官方文档

3. 最后，在 vue 模板中使用即可

   axios
   	.get("/api/test.json") // 注意这里需要.json后缀
   	.then(function(res) {
   		console.log(res);
   	})
   	.catch(function(err) {
   		console.log(err);
   	});
   

这方式貌似不支持post请求，有待研究。

方式三：前端本地启动一个 nodejs 服务，vue 项目向 nodejs 服务请求 mock 数据

1. 创建一个 node 项目（为了方便，本例直接在 vue 项目根目录创建，当然也可以是其它任何地方）

   .
   ├── 项目根目录
   │   └── serve.js
   .   .
   

2. 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);
   

3. 启动 node 服务

   node serve.js
   

4. 配置vue.config.js的proxy，解决跨域

   module.exports = {
   	devServer: {
   		proxy: {
   			"/api": {
   				target: "http://localhost:9000",
   				ws: true, // proxy websockets
   				changeOrigin: true, // 是否开启跨域
   				pathRewrite: {
   					// 路径重写
   					"^/api": "",
   				},
   			},
   		},
   	},
   };
   

5. 最后，在 vue 模板中使用即可

   axios
   	.get("/api/test")
   	.then(function(res) {
   		console.log(res);
   	})
   	.catch(function(err) {
   		console.log(err);
   	});
   

总结

方式二目前来看只支持 get 方式请求，对于 post 请求还有待研究。方式三虽然也是一种实现方式，但实现起来比较麻烦。个人建议使用方式一，灵活、方便。

相关文章

《Vue CLi3 修改 webpack 配置》