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

Question

我希望构建两个独立的Vue应用，这些应用将在Express应用程序的两个不同路由上提供：一个“公共”Vue应用和一个“管理员”Vue应用。这两个应用都有自己的路由器和存储，但它们共享许多自定义组件。 如何编辑默认的Webpack模板以根据我的两个不同入口点（“公共”和“管理员”）生成两个单独的包？ 目标是最终获得类似于以下设置：

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()
  }
}

- Alexander Savenko

---

你解决了这个问题吗？ - Dan

Answer 1

假设您需要完全分离的构建，但有一些由您输入指导的共享脚本，您可以添加单独的构建命令。

在package.json文件的"scripts"部分中：

"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

---

当与vue-cli 3的“pages”一起使用时，这非常有用，可以使您的页面输出目录完全分离。 - Chad

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

@EduardoC.K.Ferreira 我最终创建了一个单独的文件夹，并将两个版本的vue.config.js放入其中。然后我创建了2个批处理文件，分别执行以下操作：1.从该目录中复制其中一个配置文件（例如vue.adminConfig.js）。2.删除原始的vue.config.js。3.将vue.adminConfig.js文件重命名为vue.config.js。4.最后运行特定的构建命令，例如npm run build:admin。 - Elijah Lofgren

我忘了提及在我的情况下这两个配置文件包含什么内容（我有"admin"和"main"而不是"admin"和"public"）。你可以在这里看到：https://gist.github.com/ejlofgren/0f8368b5c0a74ebc94604558303a73e7，为了参考，我还在那个代码片段中的"package.json scripts"部分包括了我的package.json文件。 - Elijah Lofgren

如果有人感兴趣，这是@ElijahLofgren的一个想法的示例，但使用节点命令来复制+粘贴+重命名文件，所有这些命令一起构建：https://gist.github.com/educkf/97e76da8d8c2b5dad17846a7d576e205 - Eduardo C. K. Ferreira

Answer 2

我也对此事非常感兴趣。

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

https://cli.vuejs.org/zh/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'
  }
}

- Lucile Fievet

Answer 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

- Edward Millen

---

我之前看过这个答案，但只是点击了你的链接。我曾经尝试在Powershell/CMD中使用&&替代方案（如npm-run-all等）来运行脚本。如果我当时读完整个答案，就可以节省很多时间，直接使用git bash。 - tno2007

使用 Git 命令行。 - Gabriel soft

Answer 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 的提及，是在查看 源代码 时找到的。

- Borys Serebrov