Как на Vue-cli 3 собрать 2 разных бандла?

Question

[Александр Савенко]

Есть задача запустить приложение по частям на Vue. Сперва admin , затем public. Многои компоненты используются друг у друга. По структуре было бы логично создать так:

my-app/
+- ...
+- dist/
|  +- admin/        Админка
|  +- public/        Для пользователей
+- src/
|  +- components/    Общие компоненты
|  +- admin/         Entry point, router, store... для админки
|  +- public/        Entry point, router, store... для пользователей
+- ...

В корне сайта создал файлик 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()
  }
}

Теперь проект понимает что есть 2 entry points
Но не могу настроить запуск dev сервера для такого localhost:8080/admin and localhost:8080/public и сборку проекта(((

Answer 1

[FeelGood]

Попробуйте вместо указания разных entry использовать https://cli.vuejs.org/ru/config/#pages

Answer 2

[Gran Torino]

1. Создать два разных entryPoin: src/admin.js, src/public.js
2. Создать два разных entryPoint html: admin.html, public.html
2. Задать два разных скрипта для запуска приложения для разработки admin или public c установкой переменной в env того, какой entry point запущен
packadge.json

"scripts": {
		"dev:public": "cross-env VUE_APP_ENTRY_POINT=public vue-cli-service serve --entry src/public.js",
		"dev:admin": "cross-env VUE_APP_ENTRY_POINT=admin vue-cli-service serve --entry src/admin.js",
		"build": "vue-cli-service build",
// ...
	},

vue.config.js

const config = {
        //...,
	pages: {
		admin: {
			entry: 'src/admin.js',
			template: 'public/admin.html',
                        //...
		},
		public: {
			entry: 'src/public.js',
			template: 'public/public.html',
                        //...
		},
	},
        //...,
        devServer: {
		historyApiFallback: {
			rewrites: [{ from: /./, to: `/${process.env.VUE_APP_ENTRY_POINT}.html` }],
		},
                //...
	},
}

В режиме dev запускать либо разработку admin либо public, команда build собирать будет и то и другое сразу. Называется этот режим Multi Page Aplication.