ChunkLoadError：加载块寄存器失败答案

【问题标题】：ChunkLoadError: Loading chunk register failedChunkLoadError：加载块寄存器失败
【发布时间】：2022-10-21 01:43:08
【问题描述】：

我目前正在尝试在 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 路由器 ^4.0.12
Laravel 7.2

重现步骤

运行npm 运行生产
运行php工匠服务
打开浏览器
在浏览器中输入所需的 URL：http://127.0.0.1:8000/login

登录页面打开后点击“注册”链接。

预期行为

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

浏览器动态下载 register.js。显示注册页面

观察到的行为

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

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 }
];

【问题讨论】：

我认为您的 Register.vue 有错误，请检查控制台日志，尝试禁用预取可能会导致问题
你好。我禁用了预取，甚至尝试一起删除导入 cmets。不幸的是，它仍然失败。我尝试从 Register.vue 中删除所有内容，只留下模板，没有骰子。
@Lk77 我实际上是在逐步浏览控制台日志中链接的 webpack 代码时想出来的。这些脚本被一项名为 Osano 的服务阻止，我使用该服务在欧洲显示 GPDR 同意。

标签： javascript laravel vue.js webpack vue-router

【解决方案1】：

经过几周的头疼后，我能够通过从 Webpack.require 调用开始逐步执行 Webpack 代码来定位问题（请参阅上面的错误日志）。

我的问题是我的块被 Osano GPDR 同意服务阻止，我在我的网站中使用它来满足欧盟隐私法。

一旦我从我的网站标题中删除了 osano script 标签，一切都正常了。

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

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

【讨论】：

【解决方案2】：

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

例子：

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

【讨论】：