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

Question

I have a multi-page app that I need some pages to show 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 go to my production build, but the admin to be removed from it. Is there a way to add an environment-conditional configuration on vue.config.js, or to add one vue.config.js per environment?

match · Accepted Answer · 2021-11-16 12:55:36Z

1

vue.config.js is javascript, so you can do pretty much anything you want in there. In your case you could do something like:

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 'builtin' production, development etc, you can create your own by creating .env files, for example a file called .env.myenv containing NODE_ENV=myenv

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

edited Nov 16, 2021 at 12:55

answered Nov 16, 2021 at 12:39

match

11.2k3 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related