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

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?

CodePudding user response：

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