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

Question

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

我有多页应用程序，我已将其配置为通过 vue.config.js“页面”属性生成多个应用程序。每个应用程序都编译为单个应用程序构建。这些应用程序一直在工作，但前段时间我遇到了一个非常奇怪的问题，其中一个应用程序完全停止了初始化。 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

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

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

我比较了源代码的工作版本和损坏版本，发现当共享组件损坏时，它在 app.js 中根本不存在（例如“customer.js”或“booking.js").工作文件和损坏文件与顶部相同，所以我将它们并排比较并注意到了这个区别：

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

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

通过在启动 Vue 之前引入块-common.js，一切都开始按预期工作。我没有在 SPA 上与此功能发生冲突，因为 SPA 没有没有多个入口点，这些入口点将被构建到多个应用程序构建中。

希望这对遇到同样问题的人有所帮助。

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

Vue-cli compiled app not initializing in certain cases

javascript

vue.js

vuejs2

vue-cli