Vue-cli 编译的应用程序在某些情况下未初始化

Posted 2023-02-22

【中文标题】Vue-cli 编译的应用程序在某些情况下未初始化

【英文标题】：Vue-cli compiled app not initializing in certain cases

【发布时间】：2020-10-11 22:41:25

【问题描述】：

在我的一个项目中，我遇到了一个非常奇怪的 vue-cli 问题。我从未在其他 Vue-cli 设置中看到过类似的行为。

我有一个多页应用程序，我已将其配置为通过 vue.config.js 的“pages”属性生成多个应用程序。每个应用程序都编译为单个应用程序构建。这些应用程序一直在工作，但前一段时间我遇到了一个非常奇怪的问题，其中一个应用程序完全停止初始化。 CLI Compiler/Watcher 没有产生任何错误，Chrome 也没有在控制台上显示任何内容。

我尝试删除部分代码以查明我写给逻辑的内容是否破坏了它，最后发现如果将任何内容引入其中一个组件样式标签，它会破坏该构建/app.js 的初始化.编译器确实产生了编译的构建，但由于某种原因，这个应用程序根本没有初始化。甚至那个 main.js 文件中的 console.logs 也没有产生任何东西来控制台，但是浏览器已经加载了它（确保它不是缓存问题）。我无法找出原因，所以我只是删除了那些样式标签。

今天我又遇到了同样的问题，但这次它来自 mixin-file，它有以下几行：

    getCustomerCard(filters) 
        return window.$.post(window.vm.url.getCustomerCard, filters).then(result =>  return JSON.parse(result) );
    ,
    getCustomerCards(filters) 
        return window.$.post(window.vm.url.getCustomerCard, filters).then(result =>  return JSON.parse(result) );
    ,
    getWasteEvents(filters) 
        return window.$.post(window.vm.url.getUserWasteEvents, filters).then(wasteEvents =>  return JSON.parse(wasteEvents) );
    ,

问题出在“getCustomerCards”方法中，即使在任何地方都没有使用它，它也会破坏应用程序初始化。通过删除它，重新编译的构建初始化正常。我在这个函数中尝试了以下几行，所有这些都破坏了应用程序初始化：

    return window.$.post(window.vm.url.getCustomerCard, filters);
    return window.$.post("window.vm.url.getCustomerCard", filters);
    return window.$.post("window.vm.url.getCustomerCard");
    return window.$.post("wiabcndow.vm.url.getCustomerCard");
    return window.$.post("windowdas.vmbfda.urasl.gesttyrCusfdstomerCsard");
    return window.$.post("(window.vm.url");

另一方面，这不会破坏初始化：

    return window.$.post("wifdsn/vmbfda");

更令人费解的是，简单地将 getCustomerCard 的内容复制到 getCustomerCards 会破坏初始化。

我以前从未见过这种行为，所以我想知道 Babel 是否有可能由于某种原因破坏了构建？再说一遍：我在任何地方都看不到任何错误，编译中没有，浏览器中也没有。

更奇怪的是：中断/未初始化的应用程序甚至根本不使用这个 mixin！ Mixin 被其他应用程序/main.js 使用，所以这个应用程序甚至不应该被破坏！我很困惑，无法弄清楚可能是什么问题。

编辑：

我注意到了……这也破坏了初始化：

getCustomerCards(filters) 
    return window.$.post("window.vm.url", filters);
,

……但这不是：

getCustomerCards() 
    return window.$.post("window.vm.url");
,

我怀疑编译堆栈上一定有一些奇怪的静默错误。

在 Vue-Cli 4.3.1 上首次遇到此问题。升级到最新的 Vue-Cli 4.4.4，但问题依旧。

编辑#2：我还仔细检查了当应用程序没有初始化时，它在编译的 js 文件中仍然有我的“console.log('yeah')”。这个 console.log 被添加到 main.js 中，就在 import-lines 之后，在 Vue 组件被引入和安装之前（“new Vue…”）。当构建被默默地“破坏”时，基本上编译的构建似乎不会从那个 main.js 运行任何东西。无法弄清楚是什么导致初始化以这种方式中断......

【问题讨论】：

您可以在所有window.$.post 调用上放置断点 - 然后创建一个列表，列出所有调用它们的位置 - 然后在这些位置放置断点。您将了解初始化期间的调用流程。

当然，但问题比这更棘手：这些帖子没有被调用过，因为应用程序根本没有初始化！如果应用程序的名称是“customer-cards”并且构建是“customer-cards-app.js”，则该单个文件将由浏览器加载（已检查并且此处没有缓存问题，因为我添加了一些可以搜索的关键行从加载的源代码），但在那之后 - 没有：没有错误，没有初始化，只是空屏幕。在对断行（如所述）进行小幅修改后，应用程序启动时没有问题。

你能比较同一个JS文件的两个版本——一个版本可以工作，另一个版本不工作吗？也许您可以发现实际上破坏初始化的区别是什么？

这也是我一直在考虑的。编译的文件似乎很大，所以我可能不得不尝试限制编译的插件和组件的数量。

您可以先尝试漂亮打印缩小后的代码，然后再进行比较 - 应该更容易比较。

【参考方案1】：

我终于解决了这个问题。我无法解释为什么这些行似乎工作方式不同，并且可能同时出现多个不同的问题，但至少有一个问题是：

基本上我又一次偶然发现了这个问题，这次问题非常相似：两个应用程序，一个共享组件，构建中断/没有错误地初始化。通过以某些方式修改代码（就像在原始帖子中一样），我能够让应用程序工作，但稍后使用不同的模块它再次停止工作。 这真的把我吓坏了！

我比较了源代码的工作版本和损坏版本，并注意到当共享组件被损坏时，它在 app.js 中根本不存在（例如“customer.js”或“booking.js”）。从顶部看，工作文件和损坏文件都是相同的，因此我将它们并排比较并注意到了这种差异：

/******/    deferredModules.push([2,"chunk-vendors"]);
vs
/******/    deferredModules.push([2,"chunk-vendors", "chunk-common"]);

通过谷歌搜索，我发现了我的怀疑：公共组件被分离到 chunk-common.js 文件中。显然在某些情况下这并没有发生（因此组件源内部的修改要么导致创建块通用，要么将代码保留在构建的 app.js 中）。不幸的是，当应用程序不包含必要的文件时（因为在创建 Vue 实例之前它们没有被导入到 html 文件中），它只是默默地失败而没有错误。真是令人沮丧。

通过在启动 Vue 之前引入 chunk-common.js，一切都开始按预期工作。我没有在 SPA 上遇到此功能，因为 SPA 没有多个入口点，这将是构建到多个应用程序版本。

希望这能帮助遇到同样问题的人。