Webpack 錯誤，加載塊失敗

Question

堆棧：Webpack 4.16.0、Node8、Vuejs2

在為我的 Vuejs 應用程序提供服務時，我看到以下錯誤。

Error: Loading chunk 4 failed.
(missing: https://myapp.com/ui.chunk.bundle.js)
    at HTMLScriptElement.s (demo:1)

這個錯誤在構建中是一致的，實際文件本身可以通過 URL 訪問。

我通過import()使用代碼拆分並且初始應用程序加載正常，但是當加載另一個塊時流程會中斷，它也可以在ui.chunk.bundle.js和vendors~ui.chunk.bundle.js之間變化.

在為生產構建時，會顯示一個新錯誤，但它似乎也與加載模塊有關：

demo:1 TypeError: Cannot read property 'call' of undefined
    at o (demo:1)
    at Object.349 (ui.chunk.bundle.js:1)
    at o (demo:1)
    at o.t (demo:1)

我曾嘗試升級 webpack 和 babel，但我不知道這可能會導致什么，因為它之前工作得很好。

在我的本地機器而不是 Google App Engine 上運行應用程序時，一切似乎都很好。

應用如何加載：它通過腳本標簽加載到其他網站，因此domainA.com運行調用myapp.com/js的腳本標簽，然后流程開始，即應用基於某些邏輯加載各種塊。

在 myapp.com 訪問 webpack 生成的索引頁面包時，一切都正確加載。

請幫忙！

Answer 1

這是相當深的，肯定不容易通過兩個步驟來修復，最好使用 cli 創建一個新項目，如果使用推薦的預設方便的話，如果它仍然存在，請檢查您安裝的 npm 包並確保它們都沒有停止並已啟動- 至少根據您的 vue 版本進行更新。

Answer 2

這可能是由於“webpack.config.js”，您可以嘗試更新輸出對象

module.exports = {
  output: {
    chunkFilename: '[id].chunk.[chunkhash].js',
  }
};

希望它應該工作！

Answer 3

這可能是跨站點腳本問題。 確保 myapp.com 設置了正確的標頭。

在 myapp.com 上，設置此標頭：

Access-Control-Allow-Origin: https://domainA.com

您還應該確保您的腳本標簽將 async 設置為 false：

<script async="false" …