Workbox 加载错误的动态导入 url

Question

我正在为 laravel/vuejs 应用程序使用 workbox 和 babel 动态导入。我还使用 laravel-mix 和 laravel-mix-workbox 插件通过 generateSW().

编译和生成服务工作者

根据 vue-router 中设置的条件，资产在根 url https://myapp.test/ 中正确加载。像这样：https://myapp.test/assets/js/chunk1.js。当我访问像 https://myapp.test/post/post1 这样的子页面时，与该页面相关的块也被正确加载。到目前为止一切顺利！

但是当我直接访问post页面（https://myapp.test/post/post1）时，动态资源url被附加到最新的斜线，意思是 https://myapp.test/post/assets/js/chunk1.js 并且无法加载它们。好像把根url设置为我们访问的第一个页面

我尝试在 webpack 配置中添加 output.path 和 output.publicPath，但它们没有帮助。

相关包：

"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",
}

生成软件配置：

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

感谢您的宝贵时间。

Answer 1

我终于通过在我的 html <head> 中添加 <base> tag 来修复它。原来这是工作箱确定基数的地方 URL.

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

就我而言 Laravel:

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

Workbox 加载错误的动态导入 url

Workbox loading wrong dynamic import url

javascript

webpack

vue.js

laravel-mix

workbox-webpack-plugin