Nuxt PWA本地配置workboxURL与modulePathPrefix报错问题求助

问题回顾 #

我尝试在Nuxt PWA中使用本地的workboxURL和modulePathPrefix，已经引入了workbox-cdn依赖，当前配置代码如下：

workbox: { 
  dev: isDev, 
  workboxURL: './node_modules/workbox-cdn/workbox/workbox-sw.js', 
  config: { 
    modulePathPrefix: './node_modules/workbox-cdn/workbox', 
  } 
}

但运行后触发了加载失败错误：

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3000/node_modules/workbox-cdn/workbox/workbox-sw.js' failed to load. at http://localhost:3000/sw.js:3:1

问题根源 #

核心问题很直观：Nuxt默认不会对外暴露node_modules目录，浏览器（包括Service Worker）无法直接访问这个路径下的文件，自然会加载失败。

解决方案 #

方案一：手动复制Workbox资源到静态目录 #

1. 在Nuxt项目根目录下，找到static文件夹（没有的话直接新建），在里面创建workbox子文件夹。
2. 把node_modules/workbox-cdn/workbox里的所有文件和子目录，完整复制到static/workbox中。
3. 修改Nuxt的Workbox配置，指向静态目录下的合法资源路径：

   workbox: { 
     dev: isDev, 
     workboxURL: '/workbox/workbox-sw.js', 
     config: { 
       modulePathPrefix: '/workbox', 
     } 
   }
   

   现在Service Worker会从http://localhost:3000/workbox/workbox-sw.js加载脚本，这是Nuxt静态资源的合法访问路径，不会再出现加载失败的问题。

方案二：用脚本自动复制（更适合团队协作） #

如果不想每次更新workbox-cdn都手动复制文件，可以用自动化脚本搞定：

1. 安装copyfiles工具：

   npm install copyfiles --save-dev
   

2. 在package.json的scripts中添加复制命令：

   "scripts": {
     "copy-workbox": "copyfiles node_modules/workbox-cdn/workbox/**/* static/workbox"
   }
   

3. 把复制命令和开发/构建命令绑定，确保每次启动项目前自动同步最新的Workbox资源：

   "scripts": {
     "dev": "npm run copy-workbox && nuxt",
     "build": "npm run copy-workbox && nuxt build"
   }
   

注意事项 #

• 开发环境下，如果修改了静态目录的内容，可能需要重启Nuxt开发服务器才能生效。
• 生产环境部署时，要确保static/workbox目录的内容被正确打包上传到服务器。

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