ChunkLoadError：加载块寄存器失败

Question

我目前正在尝试在 VueJS3 和 Laravel 中实现路由的延迟加载。我正在使用 vue-router 来实现我的路线。

不幸的是，每当我点击链接时，没有任何反应，30 秒后，我看到浏览器控制台中弹出超时错误。如果我用直接导入替换路由的延迟加载，一切都会正常运行。

如果有任何关于这里可能发生的事情的提示，我将不胜感激。我已经遇到这个问题几个星期了。所有其他清除浏览器缓存或在 webpack.config.js 中设置公共路径的帖子和建议对我来说都不起作用。我也用 webpack 替换了 laravel-mix，问题仍然存在。

---

前提条件：

• Webpack 5.69.1
• Webpack-cli ^4.9.2
• Vue ^3.2.31
• Vue-router ^4.0.12
• Laravel 7.2

重现步骤

1. 运行 npm run production
2. 运行 php artisanserve
3. 打开浏览器
4. 在浏览器中输入所需的 URL：http://127.0.0.1:8000/login
5. 登录页面打开后点击“注册”链接。

预期行为

1. Npm 成功运行，manifest.json 已更新。 Webpack 生成 dists 文件夹中的所有块。
2. Laravel 服务器启动
3. 网站可通过 http://127.0.0.1:8000
4. 访问 登录页面打开路由中配置的组件。 Login.js 由浏览器下载。
5. 浏览器动态下载register.js。显示注册页面

观察到的行为

1. Npm 成功运行 manifest.json 已更新。 Webpack 生成 dists 文件夹中的所有块。
2. Laravel 服务器启动
3. 网站可通过 http://127.0.0.1:8000
4. 访问 登录页面打开路由中配置的组件。 Login.js 由浏览器下载。
5. register.js 块永远不会被下载。注册页面永远不会显示。 30 秒超时后，浏览器控制台中会打印错误。

ChunkLoadError: Loading chunk register failed.
(timeout: http://127.0.0.1:8000/dist/register.d3e633a9a1aea3ebf47b.js)
    at Object.__webpack_require__.f.j (main.34a1a3da92d476b41479.js:4051:29)
    at main.34a1a3da92d476b41479.js:3905:40
    at Array.reduce (<anonymous>)
    at Function.__webpack_require__.e (main.34a1a3da92d476b41479.js:3904:67)
    at component (routes.js:35:55)
    at extractComponentsGuards (vue-router.esm-bundler.js:2037:40)
    at eval (vue-router.esm-bundler.js:3156:22)

---

webpack.config.js

const path = require('path');
const {VueLoaderPlugin} = require('vue-loader');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const options = {basePath:'/dist/',fileName:'../mix-manifest.json',publicPath:'dist/'};
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: './resources/js/main.js',
    output: {
        clean: true,
        filename: "[name].[chunkhash].js",
        publicPath: './dist/',
        path: path.resolve(__dirname, 'public/dist'),
        chunkLoadTimeout: 30000,
    },
    resolve:{
        alias: {
            '@': path.resolve(__dirname,'resources/js'),
        },
        extensions: ['.js', '.vue', '.json']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new WebpackManifestPlugin(options),
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: false,
            __VUE_PROD_DEVTOOLS__: false,
        }),
    ]
};

路由.js

const routes = [
    {
         path: "/",
         component: DefaultLayout,
         children: [
             {
                 path: "/publicidade",
                 name: "publicidade",
                 component: () => import (/* webpackChunkName: "publicity" */ '../pages/Publicidade')
             },
             {
                 path: "/login",
                 name: "login",
                 component: () => import(/* webpackChunkName: "login" */ '../pages/login.vue')
             },
             {
                 path: "/cadastro",
                 name: "cadastro",
                 component: () => import(/* webpackChunkName: "register" , webpackPrefetch: true */ '../pages/Register.vue')
             },
             {
                 path: "perfil",
                 name: "perfil",
                 component: () => import('../pages/Profile')
             },
         ],
    },

    { path: "/:catchAll(.*)", component: NotFoundPage }
];

Answer 1

我在 vue 中遇到了同样的问题，我使用类似于 Polymer 用来导入延迟加载资源的方法解决了它。

例子：

setTimeout(() => {
  for (let i in routes[0].children ){
    routes[0].children[i].component();
  }
}, 1000)

Answer 2

经过几周的绞尽脑汁，我能够通过从 Webpack.require 调用开始逐步执​​行 Webpack 代码来找到问题（请参阅上面的错误日志）。

我的问题是我的数据块被 Osano GPDR Consent 服务阻止，我在网站中使用该服务来满足欧盟隐私法的要求。

当我从网站标题中删除 osano 脚本标签后，一切就正常了。

<script src="https://cmp.osano.com/AzZcqMSBLrjhQ2PZ1/4e3118ce-1798-4f27-93be-f6c9e99f1537/osano.js"></script>

由于在欧洲必须获得 GPDR 同意，因此我必须在 Osano 帐户的仪表板中添加一条规则，以允许来自 127.0.0.1:8080 域的脚本。