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

Question

在我的一个项目中，我遇到了一个非常奇怪的 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-component 被引入和安装之前（“new Vue…”）。 当构建被默默地“破坏”时，基本上编译的构建似乎不会从那个 main.js 运行任何东西。 无法弄清楚是什么可能导致初始化以这种方式中断……

Answer 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 没有多个入口点，这些入口点将构建到多个应用程序构建。

希望这会帮助有同样问题的人。