Vue sets different vue.config.js configurations for different environments

Question

I have a multi-page application and I need some pages to be displayed only in my development environment. This is my vue.config.js:

module.exports = {
  productionSourceMap: false,

  pages: {
    index: "src/main.js",
    admin: {
      entry: "src/main-admin.js",
      template: "public/index.html",
      filename: "admin"
    }
  }
};

I need the index page to get into my production build, but remove the admin from it. Is there a way to add environment conditional configuration on vue.config.js, or add a vue.config.js for each environment?

Answer 1

vue.config.js is javascript, so you can do almost anything you want in there. In your case you can do this:

let config = {
  productionSourceMap: false,
  pages: {
    index: "src/main.js",
  }
}

if (process.env.NODE_ENV != 'production') {
  config.pages.admin = {
    entry: "src/main-admin.js",
    template: "public/index.html",
    filename: "admin"
  }
}

module.exports = config

If you need more environments than the "built-in" product, development, etc., you can create your own by creating a .env file, For example, a file containing .env.myenv, which contains NODE_ENV=myenv

https://cli.vuejs.org/guide/mode -and-env.html#mode