從 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 測試工具