web-dev-qa-db-fra.com

Comment créer deux lots séparés avec vue-cli 3?

Je souhaite créer deux vue applications distinctes qui seront desservies par deux itinéraires différents dans une application express: un "public" vue app et un "admin" vue app. Ces deux applications ont leur propre routeur et leur magasin, mais partagent un grand nombre de composants personnalisés. Comment puis-je modifier le modèle de pack Web par défaut pour qu'il génère en sortie deux ensembles distincts basés sur mes deux points d’entrée ("public" et "admin")? L’objectif serait de se retrouver avec une configuration plus ou moins semblable à 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 avoir 2 serveurs de développement disponibles http: // localhost: 8080/admin et http: // localhost: 8080/public Chaque projet doit se trouver dans son propre dossier, et propre public

Ce que j'ai aujourd'hui: créé le fichier 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()
  }
}
vue.jsvuejs2vue-cli
27
Alexander Savenko

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

Dans votre section "scripts" de 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 administratives, vous pouvez exécuter:

npm run build:admin

et pour les constructions publiques:

npm run build:public

Pour plus d'informations, consultez le build target docs .

15
Kamal Khan

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

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

https://cli.vuejs.org/config/#pages : "Construire l'application en mode multi-page. Chaque" page "doit avoir un fichier d'entrée JavaScript correspondant. La valeur doit être un objet où 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'
  }
}
12
Lucile Fievet