saber 酱的抱枕

Fly me to the moon

09/7
2020
学习

Vue-cli mock 数据

vue 开发里 mock 数据,一个常用的办法是使用 mockjs 包。我以前也略微用过,然而最近我又想用,却发现怎么折腾都没有生效,只好寻找其他方法。

经过尝试找到了两个可用的方法,下面这个我最喜欢。这个方法使用 vue-cli 的插件 vue-cli-plugin-mock

首先安装这个插件:

vue add mock

这个插件安装之后,会自动在项目根目录创建一个文件夹 mock 和示例文件 index.js

然后我们自己在项目根目录创建一个文件 vue.config.js,配置如下:

module.exports = {
  pluginOptions: {
    mock: { entry: "./mock/index.js", debug: false }
  }
};

这样就可以发送请求获取 mock 的数据了。

mock 数据的定义方式参考示例文件即可。


附:

vue-cli-plugin-mock github

本文的方法需要你的项目是 vue-cli。如果项目不是 vue-cli 而是原生 vue 的话(应该很少吧),有一个麻烦些的方法:
Vue CLI 3 + webpack + Mockjs实现本地数据模拟

Vue-cli mock 数据