Exclude Mirage from Vue CLI production builds

Since Mirage is a development tool, you should configure Vue CLI to exclude it when building your app for production. This keeps the miragejs library out of your app and ensures users don't download any unnecessary code.

You can use your vue.config.js file to achieve this.

Step 1: Install null-loader

Add the null-loader library to your project:

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

# Using yarn
yarn add -D null-loader

Step 2: Replace Mirage with an empty package

Next, add the following to your 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")
    }
  },
}

This replaces the miragejs module in your app with an empty module when you're building for production.

Step 3: Ensure there are no production runtime calls to Server

Since we've replaced miragejs with an empty module, we need to ensure that we're not invoking makeServer (or using any of Mirage's APIs) in our production runtime code, because those APIs no longer exist.

We can do that by ensuring any code that starts Mirage is wrapped in a process.env.NODE_ENV check:

// 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")

With this configuration Mirage will neither be included nor accessed in your production environment.