Workbox加载错误动态导入url

Question

I am using workbox & babel dynamic imports for a laravel/vuejs application.我正在为 laravel/vuejs 应用程序使用工作箱和 babel 动态导入。 I am also using laravel-mix and laravel-mix-workbox plugin to compile and generate service worker via generateSW() .我还使用laravel-mix和laravel-mix-workbox插件通过generateSW()编译和生成服务工作者。

The assets are are loaded correctly in the root url https://myapp.test/ based on conditions set in vue-router.根据 vue-router 中设置的条件，资产已正确加载到根 url https://myapp.test/中。 like so: https://myapp.test/assets/js/chunk1.js .像这样： https://myapp.test/assets/js/chunk1.js 。 When I visit child pages like https://myapp.test/post/post1 , the chunks relating to the page are loaded correctly also.当我访问像https://myapp.test/post/post1这样的子页面时，与页面相关的块也被正确加载。 So far so good!到目前为止，一切都很好！

But when I visit a post page directly ( https://myapp.test/post/post1 ), the dynamic asset urls are appended to the latest slash, meaning https://myapp.test/post/assets/js/chunk1.js and fails to load them.但是当我直接访问一个帖子页面（ https://myapp.test/post/post1 ）时，动态资产 url 会附加到最新的斜杠上，这意味着https://myapp.test/post/assets/js/chunk1.js并且无法加载它们。 As if the root url is set as the first page we visit.好像根 url 被设置为我们访问的第一页。

I have tried adding output.path & output.publicPath in webpack config, but they did not help.我尝试在 webpack 配置中添加output.path和output.publicPath ，但它们没有帮助。

Related packages:相关包：

"devDependencies" {
   "workbox-webpack-plugin": "^6.0.2",
   "babel-plugin-syntax-dynamic-import": "^6.18.0",
   "laravel-mix": "^5.0.9",
   "laravel-mix-workbox": "^0.1.4",
}

generateSW config:生成SW配置：

mix.generateSW({
    mode: 'development',
    runtimeCaching: [
        {
            urlPattern: /\.(?:jpg|jpeg|svg|png|json)$/,
            handler: 'CacheFirst',
        },
        {
            urlPattern: /api($|\/?.*)/,
            handler: 'NetworkFirst'
        }
    ],
    exclude: [
        /(backend.css|backend.js)/
    ],
    include: [
        /\.(?:ttf|js|css|glb)$/,
        /(\/font.png)/
    ],
    skipWaiting: true,
});

Thank you for your time.感谢您的时间。

Answer 1

I finally fixed it by adding a <base> tag to my html <head> .我终于通过向我的 html <head>添加一个<base>标记来修复它。 Turns out this is where workbox determines base URL.原来这是工作箱确定基础 URL 的地方。

<base href="https:://myapp.test/">

Any in my case in Laravel:在我的情况下，Laravel：

<base href="{{config('app.url')}}">

Workbox加载错误动态导入url

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-03-15 11:20:49

Workbox加载错误动态导入url

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-03-15 11:20:49

解决方案1
0 已采纳 2021-03-15 11:20:49