Laravel（Inertia/Vue）项目中vite-plugin-pwa正确配置求助

问题核心 #

从Laravel Mix切换到Vite后，vite-plugin-pwa配置路径错误，导致Service Worker未正确输出到public目录，同时当前使用Workbox CDN的自定义SW无需Vite自动注入注册逻辑。

1. 调整Service Worker源码位置 #

将原public/sw.js移动到resources/js/sw.js——Vite仅处理resources目录下的源码文件，public目录为静态资源目录，不适合作为编译输入源。

2. 修正vite.config.js配置 #

更新VitePWA插件配置，解决路径、类型匹配及自动注入问题：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
                compilerOptions: {
                    isCustomElement: tag => tag.startsWith('pwa-')
                    || tag.startsWith('font-')
                },
            },
        }),
        VitePWA({
            strategies: 'injectManifest', // 自定义SW场景使用该策略
            swSrc: './resources/js/sw.js', // 指向新的源码位置
            swDest: 'pwabuilder-sw.js', // 输出到public根目录
            inject: false, // 禁用Vite自动注入注册代码
            devOptions: {
                enabled: true,
                type: 'classic' // 当前SW用importScripts，属于经典类型而非ES模块
            }
        }),
    ],
});

3. 手动注册Service Worker #

在应用入口文件（如resources/js/app.js）中添加手动注册逻辑：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', async () => {
        try {
            await navigator.serviceWorker.register('/pwabuilder-sw.js');
            console.log('Service Worker 注册成功');
        } catch (error) {
            console.error('Service Worker 注册失败:', error);
        }
    });
}

4. 验证效果 #

运行npm run build后，检查public目录下是否生成pwabuilder-sw.js；启动应用后查看浏览器控制台，确认无404错误且SW注册成功。

关键配置说明 #

• strategies: 'injectManifest'：适配自定义SW场景，Vite会编译源码并输出到指定路径
• swSrc：必须指向Vite可处理的源码文件，不能放在public目录
• inject: false：完全自定义SW注册逻辑，避免Vite自动生成的代码干扰
• devOptions.type: 'classic'：匹配当前使用importScripts的SW类型，解决开发环境兼容性问题

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