如何使用 vue-cli 3 创建两个单独的包? [英] How can I create two separate bundles with vue-cli 3?
问题描述
我想构建两个独立的 vue 应用程序,它们将在一个 express 应用程序中的两个不同路由上提供服务:一个公共"vue 应用程序和一个管理"vue 应用程序.这两个应用程序有自己的路由器和存储,但它们共享许多自定义组件.如何编辑默认的 webpack 模板,使其基于我的两个不同入口点(‘public’和‘admin’)输出两个单独的包?目标是或多或少地以这样的设置结束:
I want to build two separate vue apps that will be served on two different routes in an express application: a ‘public’ vue app and an ‘admin’ vue app. These two apps have their own router and store but they share a lot of custom components. How can I edit the default webpack template to make it output two separate bundles based of my two different entry points (‘public’ and ‘admin’)? The goal would be to end up with a setup more or less like this:
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 中自己的文件夹中,并且自己的 public
Must by available 2 dev servers http://localhost:8080/admin and http://localhost:8080/public Each project must be in own folder in dist, and own public
我今天有什么:在根目录下创建文件 vue.config.js与:
What i have today: created file vue.config.js in root directory With:
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()
}
}
推荐答案
假设您需要完全独立的构建,通过您的条目引导的一些共享脚本,您可以添加单独的构建命令.
Assuming you need completely separate builds, with some shared scripts guided by your entries, you can add separate build commands.
在您的 package.json脚本"部分:
In your package.json "scripts" section:
"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
}
对于管理员版本,您可以运行:
For admin builds, you may run:
npm run build:admin
对于公共构建:
npm run build:public
有关更多信息,请查看构建目标文档.
For more information, view the build target docs.
这篇关于如何使用 vue-cli 3 创建两个单独的包?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!