@vue/cli-plugin-pwa 没有创建 service-worker.js

Posted 2023-02-22

【中文标题】@vue/cli-plugin-pwa 没有创建 service-worker.js

【英文标题】：@vue/cli-plugin-pwa not creating service-worker.js

【发布时间】：2019-07-18 13:51:19

【问题描述】：

所以我有一个预先存在的 Vue 应用程序并想添加 PWA。我安装了@vue/cli-plugin-pwa，在第一次构建之后，我的 registerServiceWorker.js（在 src 中）和 manifest.json（在公共中）被自动创建并且似乎工作正常。但据我了解，在我运行 npm run build 后，它还应该在我的 dist 文件夹中生成一个 services-worker.js。如果我将构建文件上传到我正在获取的服务器

A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE
Error during service worker registration: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

如果我创建自定义 service-worker.js 也会发生这种情况

我如何添加自定义 service-worker.js

1：在 src 文件夹中创建 service-worker.js

// service-worker.js
console.log('Service Worker Registered!')

2：在 ~/

中创建了 vue.config.js

// vue.config.js
module.exports = 
  // ...other vue-cli plugin options...
  pwa: 
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: 
      // swSrc is required in InjectManifest mode.
      swSrc: './src/service-worker.js',
      // ...other Workbox options...
    
  

如果我使用自定义 service-worker.js 运行 npm build，它仍然不会在我的 dist 文件夹中创建 service-worker.js，并且在上传到服务器时会出现相同的错误。该服务器是启用了 https 的服务器。我错过了什么或误解了吗？提前致谢。

编辑：如果我在 dist 文件夹中手动添加 service-worker.js 文件，我也会遇到同样的错误

registerServiceWorker.js

import  register  from 'register-service-worker'

if (process.env.NODE_ENV === 'production') 
  register(`$process.env.BASE_URLservice-worker.js`, 
    ready () 
      console.log(
        'App is being served from cache by a service worker.\n' +
      )
    ,
    registered () 
      console.log('Service worker has been registered.')
    ,
    cached () 
      console.log('Content has been cached for offline use.')
    ,
    updatefound () 
      console.log('New content is downloading.')
    ,
    updated () 
      console.log('New content is available; please refresh.')
    ,
    offline () 
      console.log('No internet connection found. App is running in offline mode.')
    ,
    error (error) 
      console.error('Error during service worker registration:', error)
    
  )

【参考方案1】：

确保您已经在 main.js 中导入了 registerServiceWorker.js 文件：

import "./registerServiceWorker";

【参考方案2】：

我多次遇到非常相似的问题。看起来这是插件方面的东西，尤其是当您使用自定义 sw 名称或自定义 sw 时。

我可以推荐的 - 而不是使用插件（使用工作箱）。直接使用工作箱。这是一个 3command 设置。

npm install -g workbox-cli

然后在你的项目中

workbox wizard

回答问题，这将生成一个 workbox.config.js。

然后只需粘贴与插件相同的代码用于注册和构建过程类型

workbox generateSW workbox-config.js

这对我有用。下面是一个很好的教程，更深入地解释了这个过程

https://medium.com/google-developer-experts/a-5-minute-intro-to-workbox-3-0-156803952b3e

【讨论】：

嗨菲利普，感谢您的回复。会给你的方法一试。好像你用（vue init AppName）安装vue。 cli-plugin-pwa 不起作用，但如果您使用 (vue create AppName) 安装 vue，如果您安装具有 WPA 支持的应用程序或之后安装它，则它工作正常。

这对你有用吗？我确实遇到了完全相同的问题，但我无法弄清楚。