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