无CDN使用本地Workbox实现局域网Vue页面离线可用方案咨询

默认CDN引入模式下的workbox-sw.js会动态加载对应版本的其他核心模块，默认指向谷歌CDN，因此仅单独下载该文件无法解决外网依赖问题，可通过以下两种方案实现完全离线运行：

方案一：Vue项目本地打包（推荐） #

适配基于Vue CLI构建的项目，无需手动管理资源文件：

• 安装对应版本的本地Workbox构建依赖，版本与你当前使用的4.3.1保持一致避免兼容问题：

  npm install workbox-webpack-plugin@4.3.1 --save-dev
  

• 修改项目根目录下的vue.config.js配置，在pwa配置项中指定Workbox从本地加载：

  module.exports = {
    // 其他原有配置保持不变
    pwa: {
      workboxOptions: {
        importWorkboxFrom: 'local',
        // 你之前的其他Workbox配置（如缓存规则、排除项等）保持不变即可
      }
    }
  }
  

• 重新执行npm run build构建项目，此时生成的Service Worker文件会自动引入本地打包的Workbox资源，不会再请求外部CDN，将构建产物直接部署到Nginx即可。

方案二：全手动替换CDN资源 #

如果不想修改现有构建逻辑，可以手动托管所有Workbox资源：

• 下载workbox-cdn@4.3.1的完整npm包，提取包内所有js文件到你项目的静态资源目录，例如/static/workbox/
• 修改你现有的Service Worker代码，开头新增Workbox模块路径配置，将CDN地址替换为本地路径：

  self.workbox = {
    modulePathPrefix: '/static/workbox/'
  }
  // 把原来的谷歌CDN引入替换为本地的workbox-sw.js路径
  importScripts("/static/workbox/workbox-sw.js");
  importScripts("/precache-manifest.b62cf508e2c3da8c27f2635f7aab384a.js");
  // 后续其他Workbox配置保持不变
  

• 将所有Workbox静态资源随项目一同部署到Nginx，确保/static/workbox/路径下的所有文件可以正常访问即可。

验证方法 #

部署完成后首次联网加载页面完成所有资源缓存，断开网络后刷新页面可正常访问即配置生效。

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