Comment créer deux bundles distincts avec vue-cli 3?

Question

Je veux construire deux vue des applications qui seront servis sur deux voies différentes dans une demande expresse: un "public" vue application et d'un ‘admin' vue de l'app. Ces deux applications ont leur propre routeur et le magasin, mais ils partagent un grand nombre de composants personnalisés. Comment puis-je modifier la valeur par défaut webpack modèle de faire de la sortie de deux faisceaux en fonction de mes deux différents points d'entrée (‘public' et ‘admin')? L'objectif serait d'aboutir à une configuration plus ou moins comme ceci:

my-app/
+- ...
+- dist/
|  +- admin/         Admin bundle and files
|  +- public/        Public bundle and files
+- src/
|  +- components/    Shared components
|  +- admin/         Entry point, router, store... for the admin app
|  +- public/        Entry point, router, store... for the public app
+- ...

Doit, par 2 serveurs de dev http://localhost:8080/admin et http://localhost:8080/public Chaque projet doit être propre dossier dans dist, et propre public

Ce que j'ai aujourd'hui: fichier créé vue.config.js dans le répertoire racine Avec:

module.exports = {
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    // If you wish to remove the standard entry point
    config.entryPoints.delete('app')

    // then add your own
    config.entry('admin')
      .add('./src/admin/index.js')
      .end()
    .entry('public')
      .add('./src/public/index.js')
      .end()
  }
}

Answer 1

En supposant que vous ayez besoin de versions complètement séparées, avec certains scripts partagés guidés par vos entrées, vous pouvez ajouter des commandes de génération distinctes.

Dans votre section "scripts" package.json:

 "scripts": {
    "build:admin": "vue-cli-service build --dest dist/admin src/admin/index.js,
    "build:public": "vue-cli-service build --dest dist/public src/public/index.js
}
 

Pour les versions d'administration, vous pouvez exécuter:

 npm run build:admin
 

et pour les versions publiques:

 npm run build:public
 

Pour plus d'informations, consultez les documents de cible de génération .

Answer 2

Je suis également très intéressé par cette question.

Nous pouvons peut-être résoudre ce problème avec des sous-pages:

https://cli.vuejs.org/config/#pages : "Créez l'application en mode multi-pages. Chaque" page "doit avoir un fichier d'entrée JavaScript correspondant. La valeur doit être un objet dont la clé est le nom de l'entrée et la valeur est soit: "

 module.exports = {
  pages: {
    index: {
      // entry for the *public* page
      entry: 'src/index/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html'
    },
    // an admin subpage 
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `admin.html`.
    admin: 'src/admin/main.js'
  }
}