返回

使用 Vue-cli 3 创建多个独立 Vue 包：全面指南

vue.js

用 Vue-cli 3 创建多个独立包的指南

导言

对于拥有多个独立模块的大型 Vue 项目，使用单一的构建配置可能会变得困难。本指南将引导你使用 Vue-cli 3 创建两个独立的包，每个包都有自己独特的入口点、路由和存储。这将使你能够将它们部署到 Express 应用的不同路由上，同时仍然共享自定义组件。

配置 Vue.config.js

要开始，在项目根目录中创建一个名为 vue.config.js 的文件。此文件包含自定义 Webpack 配置，允许你修改默认构建行为。添加以下代码：

module.exports = {
  // 调整内部 webpack 配置。
  // 请参阅 https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    // 删除标准入口点
    config.entryPoints.delete('app')

    // 添加自定义入口点
    config.entry('admin')
      .add('./src/admin/index.js')
      .end()
    .entry('public')
      .add('./src/public/index.js')
      .end()
  }
}

此代码删除了标准的 app 入口点并添加了两个新的入口点：admin 和 public。每个入口点都指定了其各自的 JavaScript 入口文件。

运行构建命令

要构建两个包，请运行以下命令：

npm run build

此命令将生成两个单独的构建目录：dist/admin 和 dist/public，分别包含每个包的打包文件。

启动开发服务器

要启动每个包的开发服务器，请运行以下命令：

npm run serve:admin
npm run serve:public

这些命令将在不同的端口上启动两个开发服务器，允许你独立开发和调试每个包。

访问 Vue 应用

现在，你可以通过以下 URL 访问你的 Vue 应用：

结论

通过遵循本指南，你已经成功使用 Vue-cli 3 创建了两个独立的 Vue 包。这种方法使你能够将你的应用模块化，并在 Express 应用中轻松部署它们。

常见问题解答

  1. 为什么需要创建多个包？

创建多个包可以使你的项目更易于管理和维护。它还可以提高构建性能并优化应用程序的整体加载时间。

  1. 我可以创建任意数量的包吗？

是的，你可以创建任意数量的包，具体取决于你的项目需要。

  1. 如何将包部署到 Express 应用？

可以通过使用 Express 的静态文件中间件将包部署到 Express 应用。

  1. 我可以将自定义组件从一个包导入到另一个包吗？

是的，你可以通过将组件注册为全局组件来实现这一点。

  1. 如何在不同的包之间共享数据？

可以使用 Vuex 或其他状态管理库在不同的包之间共享数据。