Question

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

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

我试图删除部分代码，以了解我写给逻辑的东西是否破坏了代码，最后发现，如果将任何内容引入组件样式标签之一，它就会破坏该build / 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");

更令人困惑的是，将getCustomerCards的内容复制到getCustomerCards会破坏初始化。

我以前从未见过这种行为，所以我想知道Babel是否由于某种原因而破坏了构建？只是重复一遍我自己：我看不到任何错误，无论是在编译中还是在浏览器中都没有。

更奇怪的是：中断/未初始化的应用程序甚至根本没有使用此混合器！ 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在导入行之后，在引入和安装Vue组件之前（“ new Vue…”）被添加到main.js中。当构建被静默“破坏”时，基本上编译后的构建似乎没有从main.js运行任何内容。不能仅仅找出导致初始化中断的原因...

Answer 1

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

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

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

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

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

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

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

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

1 个答案: