Vue.js PWA插件部署到Github Pages子目录时无法加载service-worker.js

我来帮你搞定这个困扰！你遇到的问题核心是Github Pages部署在子路径下，但Service Worker默认从根目录加载，而直接全局设置BASE_URL会影响本地开发和其他资源路径。下面是分步解决方案：

1. 正确配置vue.config.js的publicPath #

不要直接固定设置publicPath，而是区分开发和生产环境，这样本地开发时用根路径，生产部署到Github Pages时用你的仓库子路径：

module.exports = {
  // 区分环境配置基础路径
  publicPath: process.env.NODE_ENV === 'production'
    ? '/你的仓库名/'  // 示例：'/my-vue-pwa-app/'
    : '/',
  // 可选：按需自定义PWA相关配置
  pwa: {
    // 比如修改Service Worker文件名
    // filename: 'sw.js',
    workboxOptions: {
      // 可添加缓存规则等额外配置
    }
  }
}

2. 确认src/registerServiceWorker.js的注册逻辑 #

默认的注册代码已经会自动使用process.env.BASE_URL拼接路径，确保你的代码是这样的：

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  // 自动拼接生产环境的publicPath，生成正确的子路径
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log('Service Worker已就绪，应用将从缓存加载')
    },
    registered () {
      console.log('Service Worker已注册')
    },
    cached () {
      console.log('内容已缓存供离线使用')
    },
    updatefound () {
      console.log('发现新内容正在下载')
    },
    updated () {
      console.log('新内容可用，请刷新页面')
    },
    offline () {
      console.log('无网络连接，应用将使用缓存')
    },
    error (error) {
      console.error('Service Worker注册出错:', error)
    }
  })
}

这段代码会在生产环境下自动把Service Worker的加载路径变成http://myusername.github.io/app-name/service-worker.js，完全匹配你的需求。

3. 重新打包并部署 #

执行以下命令重新构建生产代码并部署到Github Pages：

# 构建生产环境代码
npm run build
# 用vue-gh-pages插件部署
vue-cli-service gh-pages

为什么之前设置BASE_URL会失效？ #

你之前可能直接把publicPath固定成了'/app-name/'，没有区分开发环境，导致本地开发时所有静态资源都去/app-name/路径下查找，自然找不到，所以其他脚本链接失效。通过区分环境配置publicPath，就能同时兼顾本地开发和生产部署的需求。

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