块加载错误：加载块寄存器失败。

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 artisan serve
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,
        }),
    ]
};

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

- thePHPHero

---

我认为你的Register.vue文件存在错误，请检查控制台日志，尝试禁用预取，也许它是问题的原因。 - Lk77

嗨。我禁用了预取并尝试删除所有导入注释。不幸的是它仍然失败了。我尝试从 Register.vue 中删除所有内容，只留下模板，但仍然不行。 - thePHPHero

@Lk77 我在跟踪控制台日志中链接的webpack代码时找到了解决方法。这些脚本被一个名为Osano的服务阻止，我在欧洲使用它来显示GPDR同意。 - thePHPHero

Answer 1

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

例如：

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

- Nestor Oropel

Answer 2

经过几周的头痛，我终于能够通过从Webpack.require调用开始步进WebPack代码（请参见上面的错误日志）来定位问题。

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

只要我从网站标题中删除osano脚本标签，一切都正常工作了。

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

由于欧洲地区要求遵守GDPR同意规定，我不得不在我的Osano账户的仪表盘中添加一条规则，以允许来自127.0.0.1:8080域名的脚本。

- thePHPHero