从 Vue CLI 生产环境构建中排除 Mirage

由于 Mirage 是一款开发工具，因此您应该配置 Vue CLI 在为生产环境构建您的应用时排除它。这将使 miragejs 库不包含在您的应用中，并确保用户不会下载任何不必要的代码。

您可以使用您的 vue.config.js 文件来实现这一点。

步骤 1：安装 null-loader

将 null-loader 库添加到您的项目中

# Using npm
npm install --save-dev null-loader

# Using yarn
yarn add -D null-loader

步骤 2：用空包替换 Mirage

接下来，将以下内容添加到您的 vue.config.js 中

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    if (
      process.env.NODE_ENV === "production" &&
      process.env.MIRAGE_ENABLED !== "true"
    ) {
      config.module
        .rule("exclude-mirage")
        .test(/node_modules\/miragejs\//)
        .use("null-loader")
        .loader("null-loader")
    }
  },
}

当您为生产环境构建时，这会用一个空模块替换您的应用中的 miragejs 模块。

步骤 3：确保没有对 Server 的生产环境运行时调用

由于我们已经用一个空模块替换了 miragejs，我们需要确保我们不会在生产环境运行时代码中调用 makeServer（或使用 Mirage 的任何 API），因为这些 API 不再存在。

我们可以通过确保任何启动 Mirage 的代码都包装在 process.env.NODE_ENV 检查中来实现这一点

// src/main.js
import Vue from "vue"
import App from "./App.vue"
import { makeServer } from "./server"

Vue.config.productionTip = false

if (process.env.NODE_ENV === "development") {
  makeServer()
}

new Vue({
  render: (h) => h(App),
}).$mount("#app")

使用此配置，Mirage 既不会包含在您的生产环境中，也不会在生产环境中被访问。

上一步

Vue Test Utils