为什么我无法在本地主机上注册服务-worker.js？

Question

当我尝试在开发模式下构建 VueJs 应用程序时，它破坏了服务-worker.js 文件。

我用：

构建

npm run build-dev

设置：

"build-dev": "vue-cli-service build --mode development",

我注册了：

/* eslint-disable no-console */

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

register(`${process.env.BASE_URL}service-worker.js`, {
  ready() {
    console.log('App is being served from cache by a service worker.\n' + 'For more details, visit ...');
  },
  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);
  }
})

但是当加载页面时，它还会调用 http://localhost:5000/service-worker.js（它不在生产模式下，使用 vue-cli-service build；在那里，它似乎包含在通用的“编译”脚本中）。当然，它找不到它，因为它在 /script/service-worker.js 路径上。但我希望它编译为 prod，编译后的 .js。

我该如何解决？

Answer 1

我认为因为服务工作者需要 SSL，请尝试在您的本地主机上添加某种伪造的 SSL。

Answer 2

问题可能出在您使用的 http 客户端 using.By 默认情况下，它可能需要本地主机在您的情况下找到文件 'service-worker.js'。所以你可以使用：

devServer.proxy

module.exports = {
  devServer: {
    proxy: '${baseUrl}'
  }
}

更多参考：https://cli.vuejs.org/config/#devserver-proxy

为什么我无法在本地主机上注册服务-worker.js？

why i'm not able to register service-worker.js on localhost?

localhost

vue.js

service-worker

devServer.proxy