Javascript VueJs动态组件块（laravel mix/webpack）在我转到子页面后加载url更改

我正在使用Laravel和VueJs开发一个多页web应用程序。 资源使用Laravel mix（webpack包装器）编译

我在vuejs路由中延迟加载组件

{
    path: "/auth",
    component: () => import(/* webpackChunkName: "site" */'./components/Site'),
    children: [
        {
            name: "login",
            path: "login",
            component: () => import(/* webpackChunkName: "login" */'./components/auth/Login'),
            meta: {
                title: "Login to your account",
                breadcrumbs: [{ name: "Login", active: true }]
            }
        },
        {
            name: "register",
            path: "register",
            component: () => import(/* webpackChunkName: "register" */'./components/auth/Register'),
            meta: {
                title: "Register",
                breadcrumbs: [{ name: "Register", active: true }]
            }
        }
    ]
},

我的

webpack.mix.js

如下：

mix.webpackConfig({
    output: {
        publicPath: "public/",
        chunkFilename: mix.inProduction() ? "js/chunks/[name].[chunkhash].js" : "js/chunks/[name].js"
    },
});

我正在我的

projectfolder/public/js/chunks/

中获取块，这是正确的

但我的问题是，在加载主页/根页面之后

我去

http://projecturl/auth/login

这很好用。因为

login.js

区块正在从

http://projecturl/public/js/chunks/login.js

但是当我进入

http://projecturl/auth/register

它不工作！ 因为

register.js

区块正在从

http://projecturl/auth/public/js/chunks/login.js

似乎每次我转到任何子页面时，区块加载url都会发生变化。子页面url将成为区块公共路径

请帮忙