Vue définit différentes configurations vue.config.js pour différents environnements

Question

J'ai une application multipage et j'ai besoin que certaines pages soient affichées uniquement dans mon environnement de développement. Voici mon vue.config.js :

module.exports = {
  productionSourceMap: false,

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

J'ai besoin de la page d'index pour accéder à ma version de production, mais supprimez-en l'administrateur. Existe-t-il un moyen d'ajouter une configuration conditionnelle d'environnement sur vue.config.js, ou d'ajouter un vue.config.js par environnement ?

Answer 1

vue.config.js est javascript, vous pouvez donc y faire presque tout ce que vous voulez. Dans votre cas vous pouvez faire ceci :

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

Si vous avez besoin de quelque chose de mieux que "intégré" product、development 等更多的环境，您可以通过创建 .env 文件来创建自己的环境，例如包含 .env.myenv 的文件，其中包含 NODE_ENV=myenv

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