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

Posted 2023-02-22

【中文标题】如何使用 vue-cli 3 创建两个单独的包？

【英文标题】：How can I create two separate bundles with vue-cli 3?

【发布时间】：2018-09-02 09:48:25

【问题描述】：

我想构建两个独立的 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
+- ...

必须有两个可用的开发服务器 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()
  

【问题讨论】：

每个人都有解决方案吗？

【参考方案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

欲了解更多信息，请查看build target docs。

【讨论】：

这在与 vue-cli 3 的 pages 一起使用时非常有用，可以让您的页面输出目录完全独立。

使用vue-cli-service时最好使用--no-clean，否则每次构建时都会删除dist目录。

@EduardoC.K.Ferreira 我最终创建了一个单独的文件夹并将 vue.config.js 的 2 个版本放在该文件夹中。然后我制作了 2 个 bat 文件，每个文件执行以下操作： 1. 从该目录复制一个配置文件（例如 vue.adminConfig.js）。 2. 删除原来的 vue.config.js 3. 将 vue.adminConfig.js 文件重命名为 vue.config.js 4. 最后运行具体的构建命令 e.g. npm run build:admin

我忘了提到这两个配置文件在我的案例中包含什么（我有“admin”和“main”而不是“admin”和“public”）。你可以在这里看到：gist.github.com/ejlofgren/0f8368b5c0a74ebc94604558303a73e7作为参考，我还在该要点的“package.json 脚本的 sn-p”下包含了我的 package.json 文件的一部分。

如果有人感兴趣，这里有一个@ElijahLofgren 想法的例子，但是使用节点命令复制+粘贴+重命名文件，如果各自的构建命令一起使用：gist.github.com/educkf/97e76da8d8c2b5dad17846a7d576e205

【参考方案2】：

我也对这件事很感兴趣。

也许我们可以通过子页面解决这个问题：

https://cli.vuejs.org/config/#pages： "以多页模式构建应用。每个"页面"应该有一个对应的javascript入口文件。值应该是一个对象，其中key是入口的名称，值是："

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'
  

【参考方案3】：

基于此处的其他答案，我发现可以在 vue.config.js 中指定构建输出目录，而不必在命令行中执行此操作。因此，将其与 VUE_CLI_SERVICE_CONFIG_PATH 环境变量的使用相结合会使事情变得更加简单 - 无需在每次构建时复制/删除配置文件。

您必须指定 Vue 配置文件的完整路径。这甚至可以在 Windows 上工作，但只能从 Linux 类型的终端（例如，我从 Git for Windows 安装的 Git Bash 测试它，它工作正常，但不能从正常的 Windows 命令提示符工作，因为我找不到在 npm 脚本中设置环境变量的任何方式，从那里运行时有效）

https://gist.github.com/EdwardMillen/0c417747cd8ce64b8ba550bdfa582cf5

【讨论】：

我以前看过这个答案，但只是点击你的链接。我很难使用 && 替代方案（npm-run-all 等）使脚本在 Powershell/CMD 中运行。如果我只是阅读整个答案，那么使用 git bash 会为我节省很多时间。

【参考方案4】：

也可以有多个vue.config.js 配置并使用VUE_CLI_SERVICE_CONFIG_PATH 环境变量切换它们。

例如，我们可以有一个默认的vue.config.js 和一个附加的vue.public.config.js，然后像这样运行构建：

# Build using vue.config.public.js
# Note: using real path here, it didn't work with relative path
CONF=`realpath vue.config.public.js`
VUE_CLI_SERVICE_CONFIG_PATH=$CONF npm run build

# Build using default vue.config.js
npm run build

其中npm run build 在package.json 中定义为vue-cli-service build：

"scripts": 
    "build": "vue-cli-service build"

注意：我没有在文档中找到关于 VUE_CLI_SERVICE_CONFIG_PATH 的任何提及，而是在查看 source code 时发现的。