unplugin-mockery

// vite.config.ts
import Mocker from 'unplugin-mockery/vite'

export default defineConfig({
  plugins: [
    Mocker({ /* options */ }),
  ],
})

Example: playground/

// rollup.config.js
import Mocker from 'unplugin-mockery/rollup'

export default {
  plugins: [
    Mocker({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-mockery/webpack').default({ /* options */ })
  ]
}

export default defineNuxtConfig({
  modules: [
    'unplugin-mockery/nuxt',
  ],

  unpluginMockery: {
    mockDir,
    client: {
      port: 51223,
    },
  },
})

在 Webpack 中，它工作地很好。 但在 Vue Cli 中，webpack-dev-server 的启动时机有所不同，因此我们无法通过插件获取 Vue Cli 中的 webpack-dev-server devServer 的实例。 而是通过获取 webpack 的方式进行设置。

In Webpack, it works well. But in Vue Cli, the timing of starting webpack-dev-server is different, so we cannot get the instance of webpack-dev-server devServer in Vue Cli through the plugin. Instead, we set it by getWebpackConfig.

// vue.config.js
const { getWebpackConfig } = require('unplugin-mockery/webpack')

module.exports = {
  configureWebpack: {
    devServer: {
      ...getWebpackConfig({ /* options */ }).devServer,
    },
  },
}

# .env custom client port
VUE_APP_MOCKERY_CLIENT_PORT=51224

// esbuild.config.js
import { build } from 'esbuild'
import Mocker from 'unplugin-mockery/esbuild'

build({
  plugins: [Mocker()],
})

Schema Setting in VSCode

Edit .vscode/settings.json:

{
  // schema
  "json.schemas": [
    {
      "fileMatch": ["*.scene.json"],
      "url": "./mock/schemas/scene.schema.json"
    }
  ]
}