我们如何从 Vue 2 迁移到 Vue 3

# Web 开发# JavaScript# Vue

大约一年前，我们终于从 Vue 2 迁移到了 Vue 3。当时距离 Vue 3 正式停用还有 6 个月。当时，我们的应用程序有大约 100 个页面和 300 个组件，并使用了一些与 Vue 相关的经典依赖项：Vue-router、Pinia（和 Pinia ORM）、Vue-i18n、TipTap、ElementUI（适用于 Vue 3 的 ElementPlus）

以下是一些对我们有帮助的建议。由于 Vue 2 仍然运行良好，您最好花点时间简化迁移过程，而不是仓促行事，否则会破坏您的应用程序并破坏您的士气！

1️⃣ 开始之前

警告他人

事情肯定会出问题，哪怕是一点点。你最好确保其他团队同意。

升级到最新的 Vue 2.7

显然，由于大多数新功能在 Vue 2.7 中可用，并且与 Vue 2.7 兼容，因此如果您还没有更新，那么赶上更新很重要。在迁移到 Vue 3 时，您仍然可以享受其功能。迁移步骤也将更小。

慢慢来

这可能是一项相当大的工作，因此您最好预期在很长一段时间内减轻风险。此外，它还帮助我们（开发人员）保持士气！计划几周甚至几个月，因为您知道何时开始，但不知道何时完成……最后，最好每周花一些时间，这样任何中断都不会造成灾难性的后果。

创建团队

如果可能的话，不要只依赖一名开发人员，因为这是一项非常繁重的任务。此外，您需要快速反馈和合并循环，因为许多更改会影响整个代码库，并且可能每天都会产生冲突。如果不处理这个问题，这已经够难的了！

测试驱动迁移

一半的时间将用于测试整个应用程序，因此你最好尽可能地实现自动化。根据我们的经验：

  • 单元测试不是很有用，因为它们通常测试与 Vue 无关的东西（例如只有“纯 JS”函数），所以我们没有关注它们
  • 使用 vue-test-utils 进行组件测试迁移起来非常麻烦，最后我们甚至不得不禁用其中的一些
  • 端到端测试是最有价值的，因为它不与任何 JS 或 Vue 内部绑定，并且一旦应用程序中出现错误就会失败

    • 总之，最好的方法是创建所谓的“冒烟测试”，您只需使用您能想到的最基本的场景在应用程序内导航即可。保持简单，这样它们就会很快，因为您越早让它们运行，它们就越有用。如果它们在合并之前运行（例如在 CI 中），则可以获得加分。

    输入所有内容

    TypeScript 有点帮助，但 Vue 2 对它的支持仍然很差。使用 TypeScript 仍然是一个好主意，但它可能没有太大帮助；一旦使用 Vue 3，`setup` 语法将是你最好的朋友！

    对所有事物进行 Lint

    这很明显，但代码中会发生很多变化，也会有很多错误。一个简单的 ESLint / Prettier 可以节省很多时间。如果你已经拥有它们，你可以在迁移的同时检查 Vue 3 的新规则：https://eslint.vuejs.org/rules/

    使用 Vite

    在开始迁移 Vue 之前，我们已经从 Webpack 迁移到了 Vite，所以我不确定这是否有很大的帮助，但由于这是当今的明确标准，一些插件甚至可能没有提供使用 Webpack 升级的说明。我猜先这样做比较安全，因为 Vite 支持 Vue 2，但相反，Vue 3 生态系统可能不支持 Webpack。

    2️⃣ 先迈出一小步

    目标是在实际升级 Vue 本身时尽可能减少更改。

    升级依赖项

    检查您使用的每个与 Vue 相关的依赖项，并检查是否有同时支持 Vue 2 和 Vue 3 的版本，然后升级到该版本。Vue-demi 帮助很多插件维护者实现了这一点，因此很有可能可用。

    例如，您可能希望从 Vuex 迁移到 Pinia，它支持两个版本（Vuex 仍然需要小幅迁移）并且无论如何都是新标准。

    替换依赖项

    对于其他依赖项，您可能需要检查是否有任何现代替代方案可以满足您的需求。例如，我们用 vue-use 替换了 vue-mq。

    需要时使用 Monkeypatch

    我们必须务实，因此由于某些迁移比其他迁移更难，我们最终创建了一个小的抽象层来修复它。例如，我们在 vue-i18n v9 上遇到了困难，它带来了一些（有时是未记录的）重大变化。因此，我们最终创建了一个帮助程序，它公开了 `$t` 的自定义版本，以避免必须重写每个组件（因为这个最常用的函数现在基本上无缘无故地不接受“空值”）。换句话说，不要太完美主义！

    3️⃣开始迁移

    现在艰苦的工作开始了。我们之前所做的一切都会减轻痛苦。这里没有什么魔法，这可能是迁移过程中最困难的部分。

    改变一切，但什么也没有

    按照说明使用“迁移构建”（也称为兼容模式）将 Vue 2 替换为 Vue 3。

    关闭所有可用标志，以便应用程序的运行几乎与版本 2 一样。

    检查是否没有重大更改影响您的应用，或者修复它们。

    小步骤

    逐步启用每个标志并彻底测试应用程序。如果某些组件难以迁移，请记住您可以覆盖其兼容性选项；因此，您最好合并所有内容，但保留一些组件以便稍后迁移，而不是等待整个应用程序立即运行。不要试图一次修复所有问题，让几天时间过去，这样您就可以发现任何错误（并恢复您的心理健康）。

    大步伐

    但是有些依赖项不提供快捷方式。在我们的案例中，将 UI 库从 ElementUI (Vue 2) 迁移到 ElementPlus (Vue 3) 非常困难，而且无法分成更小的步骤。我听说对于 Vuetify 来说更难。为此，你必须坚强、耐心，并花时间一次性完成所有工作。也许在你的团队日历中留出整整一周的时间！

    请记住，您仍然可以覆盖在运行时导入的每个组件的兼容性行为：

    import { ElButton } from 'element-plus'

ElButton.compatConfig = {
  FEATURE_ID_A: true // features can also be toggled at component level
}