Как я могу создать два отдельных пакета с vue-cli 3?

Я хочу создать два отдельных vue-приложения, которые будут обслуживаться на двух разных маршрутах в явном приложении: "публичное приложение vue и приложение" admin vue ". Эти два приложения имеют свой собственный маршрутизатор и хранилище, но у них есть много настраиваемых компонентов. Как изменить шаблон webpack по умолчанию, чтобы он выводил два отдельных пакета на основе двух разных точек входа ("public" и "admin")? Цель состоит в том, чтобы в конечном итоге установить более или менее такую настройку:

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. Каждый проект должен находиться в собственной папке на расстоянии и иметь собственную публикацию

Что у меня сегодня: созданный файл 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()
  }
}

Ответ 1

Меня тоже очень интересует этот вопрос.

Возможно, мы сможем решить эту проблему с помощью подстраниц:

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'
  }
}

Ответ 2

Предполагая, что вам нужны совершенно отдельные сборки, с помощью некоторых общих скриптов, управляемых вашими записями, вы можете добавить отдельные команды сборки.

В разделе "скрипты" 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
}

Для сборки admin вы можете запускать:

npm run build:admin

и для публичных построений:

npm run build:public

Дополнительные сведения см. В документации по сборке.