Vue CLI Mock 是 Vue CLI 提供的一個開發工具，它可以幫助開發者模擬 API 請求并返回模擬數據，使得前端開發不再被后端 API 所限制。在實際開發中，后端 API 開發進度不受控制，甚至可能會存在開發中間遇到障礙暫時無法提供 API 的情況。在這種情況下，就需要使用 Mock 等假數據來提高開發效率。

npm install @vue/cli-service-global -g
npm install vue-cli-plugin-mock -D
npm install mockjs -D

使用 Vue CLI Mock 需要全局安裝 @vue/cli-service-global，并在項目中安裝 vue-cli-plugin-mock 和 mockjs。安裝完成后，在 vue.config.js 中添加如下配置：

const path = require('path')
const MockServer = require('vue-cli-plugin-mock/lib/server')
module.exports = {
devServer: {
before: MockServer(path.join(__dirname, 'mock'))
}
}

該配置將 Mock 路徑指向項目根目錄下的 mock 目錄。在 mock 目錄下，我們可以新建以不同接口命名的 .js 文件，如 user.js，然后在其中編寫 Mock 數據。

const Mock = require('mockjs')
Mock.mock('/api/user', 'get', {
'code': 200,
'data': {
'id': '@id',
'name': '@cname',
'age|18-60': 1,
'gender|1': ['男', '女']
}
})

這里編寫了一個簡單的 User 接口，返回的數據內容由 Mock 隨機生成。在項目中，當請求 /api/user 接口時，就會轉向 mock/user.js 文件，返回定義的 Mock 數據。