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

2024-04-09

我想构建两个独立的 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/admin and http://localhost:8080/public 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()
  }
}

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

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

欲了解更多信息,请查看构建目标文档 https://cli.vuejs.org/guide/build-targets.html.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 vue-cli 3 创建两个单独的包? 的相关文章

随机推荐

  • C /C++ 无锁(或非阻塞)环形缓冲区覆盖最旧的数据?

    我正在尝试找到一种方法 以无锁或非阻塞的方式为单个消费者 单个消费者创建环形缓冲区 该缓冲区将覆盖缓冲区中最旧的数据 我读过很多无锁算法 当缓冲区已满时 返回 false 时 这些算法就会起作用 即 不添加 但我什至找不到伪代码来说明当您需
  • Node.getTextContent() 在 Node 中未定义

    在我的项目中我面临一个问题 getTextContent 方法是 节点类型未定义 我目前使用的是jdk 1 5 谁能告诉我这是什么意思 如果您遇到这个问题Eclipse 我测试的解决方案是 Java Build Path Order and
  • Python 中的 MATLAB 风格的 find() 函数

    在 MATLAB 中 很容易找到满足特定条件的值的索引 gt gt a 1 2 3 1 2 3 1 2 3 gt gt find a gt 2 find the indecies where this condition is true 3
  • “使用未分配的局部变量”是什么意思? [复制]

    这个问题在这里已经有答案了 我不断收到年费率 月费和滞纳金的错误 using System using System Collections Generic using System Linq using System Text names
  • 了解 JavaScript 闭包 - 冻结传递给回调的变量

    我对 JavaScript 闭包还没有基本的了解 我有一个关于具体情况的问题 这也许也是基本和常见的例子 3 秒内从 1 数到 3 请参阅此处的 JSFiddle http jsfiddle net nAh8x http jsfiddle
  • 如何在 Scala Breeze 中压缩两个 DenseVector?

    我想拉两个拉链DenseVectors对每一对进行运算 得到一个新的向量作为结果 使用 scala breeze 实现此目的的最佳方法是什么 我可以通过使用他们来解决这个问题data字段 但我需要构建一个新的DenseVector从结果数组
  • UITextView 不更新其 contentSize

    我正在动态调整 aUITextView的高度和 的高度UITableViewCell当其内容发生变化时 它就会被嵌入 但我也可以粘贴预定义的文本 由于此粘贴是以编程方式进行的 因此问题是 将选定的文本位添加到UITextView的短信并致电
  • 通过字符串查找可绘制对象[重复]

    这个问题在这里已经有答案了 可能的重复 Android 从 drawable String 打开资源 https stackoverflow com questions 2349652 android open resource from
  • GeoAlchemy2:获取某个点的经纬度

    考虑以下SQLAalchemy http www sqlalchemy org GeoAlchemy2 http geoalchemy 2 readthedocs org en 0 2 6 index html具有几何字段的 ORM fro
  • 面向方面编程(AOP)有哪些缺点?

    面向方面编程有哪些可能的和关键的缺点 例如 新手的神秘调试 可读性影响 我认为最大的问题是没人知道如何定义切面的语义 or 如何非程序地声明连接点 如果您无法独立于要嵌入的上下文来定义某个方面的功能 或者无法以不损害其嵌入的上下文的方式定义
  • 如何在 Go 和 Android 之间使用 RSA

    我 1 在 Go 中创建公钥并将其发送到 Android 2 android使用下面的代码来加密它的数据以字符串类型发送到Go 3 去获取字符串数据并尝试解密 但不能 我的Go代码 DecryptWithPrivateKey decrypt
  • Is
  • Angular2指令“无法使用输出元数据读取未定义的属性‘订阅’”

    关于 Angular2 指令 我想使用outputs而不是使用 Output因为我有很多自定义事件并且希望保持 DRY 但是 我有TypeError Cannot read property subscribe of undefined 而
  • SET 查询中“在此上下文中无效使用聚合函数”(Neo4j)

    我想知道为什么这被认为是 Neo4j 的 Cypher 中聚合函数的无效使用 MATCH p Project EMPLOYS n Person SET p youngest MIN n age 虽然以下被认为是有效的用例 MATCH p P
  • MYSQL声明变量

    我不明白这个脚本有什么问题 BEGIN DECLARE crs INT DEFAULT 0 WHILE crs lt 10 DO INSERT INTO continent name VALUES cont crs SET crs crs
  • 我应该使用 SIMD 或向量扩展还是其他什么?

    我目前正在开发一个开源 3D 应用程序框架c questions tagged c 2b 2b with c 11 questions tagged c 2b 2b11 我自己的数学库是这样设计的XNA数学库 http msdn micro
  • 无法向 Mongoose 查询返回的对象添加新属性[重复]

    这个问题在这里已经有答案了 我正在使用 Node js MongoDB 和 Express 编写 API 我似乎无法向我正在迭代的位置对象添加新属性 我根本不明白我的代码的问题 loc是一个普通的对象 它应该可以工作 我错了吗 GET Lo
  • `require` 在 php 中不起作用

    这是我现在正在获取的错误 PHP Fatal error require Failed opening required base data home apps s civic planet 191520 20180221t115719 4
  • 列表活动中的上下文菜单

    我有带有自定义数组适配器的列表活动 当长按列表项时我无法获取上下文菜单
  • 如何使用 vue-cli 3 创建两个单独的包?

    我想构建两个独立的 vue 应用程序 它们将在 Express 应用程序中的两条不同路径上提供服务 公共 vue 应用程序和 管理 vue 应用程序 这两个应用程序有自己的路由器和商店 但它们共享许多自定义组件 如何编辑默认的 webpac