web-dev-qa-db-ja.com

vue-cli 3で2つの別個のバンドルを作成するにはどうすればよいですか？

エクスプレスアプリケーションの2つの異なるルートで提供される2つの別個のvueアプリを作成したい： 'public' vue appと 'admin' vue app。これらの2つのアプリには独自のルーターとストアがありますが、多くのカスタムコンポーネントを共有しています。デフォルトのwebpackテンプレートを編集して、2つの異なるエントリポイント（「パブリック」および「管理者」）？目標は、次のようなセットアップになります。

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
+- ...

利用可能な2つの開発サーバーごとに http：// localhost：8080/admin および http：// localhost：8080/public 各プロジェクトは、dist内の独自のフォルダーに存在する必要があります。自分の公開

私が今日持っているもの：ルートディレクトリにvue.config.jsファイルを作成：

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

エントリによってガイドされる共有スクリプトを使用して、完全に個別のビルドが必要であると仮定して、個別のビルドコマンドを追加できます。

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
}

管理ビルドの場合、次を実行できます。

npm run build:admin

パブリックビルドの場合：

npm run build:public

詳細については、 build target docs をご覧ください。

15
Kamal Khan

私もこの問題に非常に興味があります。

サブページでこの問題を解決できるかもしれません：

https://cli.vuejs.org/config/#pages ：「マルチページモードでアプリをビルドします。各「ページ」には、対応するJavaScriptエントリファイルが必要です。値はオブジェクトである必要がありますここで、キーはエントリの名前で、値は次のいずれかです。

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