如何使用 vue-cli 3 创建两个单独的包？

Question

我想构建两个独立的 vue 应用程序，它们将在 express 应用程序的两条不同路径上提供服务：一个“公共”vue 应用程序和一个“管理员”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 中自己的文件夹中，并且自己的 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()
  }
}

原文由 Alexander Savenko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设您需要完全独立的构建，一些共享脚本由您的条目引导，您可以添加单独的构建命令。

在你的 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
}

对于管理员构建，您可以运行：

 npm run build:admin

对于公共构建：

 npm run build:public

有关更多信息，请查看 构建目标文档。

原文由 Kamal Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议