Vite构建配置问题：无法将Vue应用与Service Worker打包至同一dist目录

方案一：通过Rollup配置将SW作为额外入口处理 #

直接在主vite.config.js中把Service Worker设为额外入口，同时通过Rollup插件修改其输出格式，避免模块语法报错：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      // 定义主应用和SW的入口文件
      input: {
        main: './index.html',
        sw: './src/sw.js' // 替换为你的SW源文件路径
      },
      output: {
        // 单独设置SW的输出路径为dist根目录
        entryFileNames: chunk => chunk.name === 'sw' ? '[name].js' : 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]'
      },
      // 自定义Rollup插件修改SW的打包格式为IIFE
      plugins: [
        {
          name: 'sw-format-fix',
          generateBundle(_, bundle) {
            const swChunk = bundle['sw.js']
            if (swChunk) {
              swChunk.code = `(function() { ${swChunk.code} })();`
            }
          }
        }
      ]
    }
  }
})

• 原理：将SW作为独立入口打包，通过自执行函数包裹代码，规避ES模块语法在Service Worker环境中的兼容性问题
• 执行vite build即可一次性生成符合要求的dist目录结构

方案二：使用vite-plugin-pwa的InjectManifest模式 #

借助Vite官方生态的PWA插件，通过自定义模式控制SW的输出：

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

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      strategies: 'injectManifest', // 启用自定义SW模式，而非自动生成
      srcDir: 'src',
      filename: 'sw.js', // 输出的SW文件名
      manifest: false, // 不需要manifest.json可关闭
      injectManifest: {
        rollupFormat: 'iife', // 强制SW打包为IIFE格式
        // 可添加Workbox的glob配置，控制缓存资源
        globPatterns: ['**/*.{html,js,css,png}']
      }
    })
  ],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[hash].[ext]',
        chunkFileNames: 'assets/[name].[hash].js',
        entryFileNames: 'assets/[name].[hash].js'
      }
    }
  }
})

• 优势：集成Workbox的缓存能力，同时完全控制SW的代码和输出格式
• 执行vite build后，SW会直接输出到dist根目录，且无模块语法报错

方案三：拆分配置后合并构建结果 #

如果坚持拆分配置文件，可通过修改SW的构建配置避免覆盖主应用文件：

1. 主应用vite.config.js保持正常配置，输出到dist目录
2. 创建vite-sw.config.js：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    outDir: 'dist', // 和主应用输出目录一致
    emptyOutDir: false, // 禁止清空dist，避免覆盖主应用文件
    rollupOptions: {
      input: './src/sw.js',
      output: {
        file: 'dist/sw.js', // 直接输出到dist根目录
        format: 'iife' // 打包为IIFE格式解决模块报错
      }
    }
  }
})

3. 修改package.json的构建脚本：

{
  "scripts": {
    "build": "vite build && vite build -c vite-sw.config.js"
  }
}

• 执行npm run build会先构建主应用，再构建SW，两者文件共存于dist目录

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