我想构建两个独立的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每个项目必须在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()
}
}
2 回答
我对此事也很感兴趣 .
也许我们可以用子页面来解决这个问题:
https://cli.vuejs.org/config/#pages:"Build the app in multi-page mode. Each " page " should have a corresponding JavaScript entry file. The value should be an object where the key is the name of the entry, and the value is either:"
假设您需要完全独立的构建,并且您的条目引导了一些共享脚本,您可以添加单独的构建命令 .
在package.json“scripts”部分中:
对于管理员构建,您可以运行:
对于公共构建:
有关更多信息,请查看build target docs .