工作箱加载错误的动态导入 url

问题描述

我正在为 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 这样的子页面时，与该页面相关的块也被正确加载。到目前为止一切顺利！

但是，当我直接（https://myapp.test/post/post1）访问帖子页面时，动态资产网址会附加到最新的斜杠，即 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",}

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

感谢您抽出宝贵时间。

解决方法

我最终通过在我的 html <head> 中添加一个 <base> tag 来修复它。原来这是 workbox 确定基本 URL 的地方。

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

我在 Laravel 中的任何情况：

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

javascript laravel-mix vue.js webpack webpack webpack workbox-webpack-plugin