Laravel+Vue.js转PWA遇No matching service worker detected错误求助

针对你的Laravel+Vue.js PWA转换问题，核心问题集中在路径配置错误和脚本执行逻辑错误，以下是具体修复方案：

1. 修正资源引用路径 #

Laravel项目的public目录是Web服务器的根目录，引用资源时无需添加/public/前缀：

修改HTML入口文件的manifest引用 #

<!-- 原代码 -->
<link rel="manifest" href="/public/manifest.json"/>

<!-- 修改后 -->
<link rel="manifest" href="/manifest.json"/>

修改Service Worker注册路径 #

<!-- 原代码 -->
navigator.serviceWorker.register('/public/sw.js', { scope: '/' })

<!-- 修改后 -->
navigator.serviceWorker.register('/sw.js', { scope: '/' })

2. 修复Service Worker注册脚本的执行逻辑 #

带有src属性的<script>标签内的内嵌代码不会被执行，需拆分独立脚本：

<!-- 原代码 -->
<script src="/js/main.min.js?v=4.0.4">
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(function (registration) {
                console.log('Signage Lab PWA: ServiceWorker registration successful with scope: ', registration.scope);
            });
        })
    }
</script>

<!-- 修改后 -->
<script src="/js/main.min.js?v=4.0.4"></script>
<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(function (registration) {
                console.log('Signage Lab PWA: ServiceWorker registration successful with scope: ', registration.scope);
            });
        })
    }
</script>

3. 调整Workbox配置的输出路径 #

swDest需使用相对项目根目录的路径，而非绝对路径：

// 原代码
swDest: '/public/sw.js',

// 修改后
swDest: 'public/sw.js',

4. 验证修复效果 #

完成修改后执行以下步骤：

• 重新运行Workbox CLI生成Service Worker：workbox generateSW workbox-config.js
• 清除浏览器缓存（或使用无痕模式测试）
• 打开浏览器开发者工具「Application」标签，检查Service Worker是否注册成功、manifest是否正常加载

内容的提问来源于stack exchange，提问作者Lucky