VUE3 项目开发实战入门系列（7.-Mock接口）在开发环境下有时候需要前端去模拟一些数据接口，原因很简单，因为

Mock接口

在开发环境下有时候需要前端去模拟一些数据接口，原因很简单，因为团队协作的关系，我们很难保证在实现前端业务时后台已经有完整的产出，在一些团队中这甚至是一个硬性的要求，先通过mock接口测试后再去对接后台服务接口，下面我们在项目中引入mock。

章节内容：

安装依赖
修改配置文件
修改基准路径
测试请求接口

安装依赖

npm i mockjs -S
npm i vite-plugin-mock -D

vite-plugin-mock是一个第三方的vite插件。

修改配置文件

修改配置文件vite.config.js

// 其他代码...

// 导入viteMock
import { viteMockServe } from 'vite-plugin-mock';

//export default defineConfig({
export default ({ command }) => {
	return {
		plugins: [
			vue(),
			vueJsx({}),
			styleImport({
				libs: [{
					libraryName: 'ant-design-vue',
					esModule: true,
					resolveStyle: (name) => {
						return `ant-design-vue/es/${name}/style/css`;
					},
				}]
			}),
			viteMockServe({
				supportTs: false,
				mockPath: 'mock',
				localEnabled: command === 'serve'
			}),
		],
		resolve: {
			alias: {
				'@': resolve(__dirname, 'src'),
			}
		}
	}
}
//})

注意这里为了访问command参数，需要把配置改成函数的写法。

添加接口文件，在根目录下新增mock文件夹，新增文件mock/post.js

const Mock = require('mockjs')

export default [
    {
        url: '/api/posts',
        method: 'GET',
        response: () => {
            return Mock.mock({
                code: 0,
                message: 'ok',
                type: 'success',
                'data|10': [
                    {
                        id: '@integer(0, 100)',
                        title: '@cparagraph( 2 )',
                        create_time: "@date('yyyy-MM-dd')",
                        author: '@cname()'
                    }
                ]
            })
        }
    }
]

关于mock数据的生成可以参考mock官方的文档。

修改基准路径

我们之前在src/setup/index.js中设置过axios基准路径为"http://127.0.0.1:5000"，实际上这个路径是为了保留给生产环境使用的，往往在开发时包含了开发环境和生产环境两种，所以需要动态的设置基准路径，vite中可以使用import.meta.env.MODE访问当前环境模式。

src/setup/index.js

// 其他代码...

	const httpRequest = new HttpRequest({
        // 你的axios基准路径, https://vitejs.dev/guide/env-and-mode.html
        baseURL: import.meta.env.MODE === "development" ? "" : "http://127.0.0.1:5000"
    });

// 其他代码...

注意此处判断如果环境为development则返回空字符串，因为mock的服务器路径和当前开发服务器一致。

测试请求接口

配置完毕就来测试下吧，src/views/index.vue

<template>
    <div>
        <h2>首页 - by ctcode</h2>
	<div style="margin: 20px 10%;">
        	<a-table rowKey="id" :dataSource="dataSource" :columns="columns" />
	</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataSource: [],
            columns: [
                {
                    title: "姓名",
                    dataIndex: "author",
                    key: "author",
                },
                {
                    title: "标题",
                    dataIndex: "title",
                    key: "title",
                },
                {
                    title: "日期",
                    dataIndex: "create_time",
                    key: "create_time",
                },
            ],
        };
    },
    created() {
        this.$request({
            url: "/api/posts",
            method: "POST",
        })
            .then((res) => {
				const { data, status } = res;
                if (status === 200) {
                    this.dataSource = data.data;
                }
            })
            .catch((err) => {
                console.log(err);
            });
    },
};
</script>

这里用了稍微复杂的组件table，关于请求是直接在组件内发起的，然也可以把API单独抽离到一个模块中统一管理。

页面效果如下：

查看代码：

git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v7.0

好友微信号

添加大佬微信和上千同伴一起提升技术交流生活

hsian_

最后

码字不容易你的点击关注点赞留言就是我最好的驱动力

VUE3 项目开发实战入门系列 （7.-Mock接口）