我无法使用VUE

Question

我正在尝试使用VUE创建PWA。

当尝试注册服务工作者时，我通过以下方式在文件main.js中进行操作：

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

const prod = process.env.NODE_ENV === 'production';
const swLocation = '../public/sw-config.js';

if (
  prod &&
  ('https:' === location.protocol || location.host.match(/(localhost|127.0.0.1)/)) &&
  navigator.serviceWorker
) {
  navigator.serviceWorker.register(swLocation).catch( error => console.log)
  console.log('sw register');
}

您可以看到我的服务工作者文件名为sw-config.js，它位于公用文件夹中，与index.html处于同一级别。

但是在执行 npm run build 并从具有npm http-server 的本地服务器执行此操作时，我通过控制台收到消息：“ sw注册” 还会出现以下错误：

在获取脚本时收到错误的HTTP响应代码（404）。 无法加载资源：net :: ERR_INVALID_RESPONSE

我还注意到，第一次执行该应用程序时，该错误未在控制台中显示，但是如果重新加载，则它是在启动时显示的。

我试图通过清理所有注册的服务人员来解决此问题，以验证是否是错误，但是它不起作用，这是我在Chrome控制台中使用的代码：

navigator.serviceWorker.getRegistrations().then(function(registrations) { for(let registration of registrations) { registration.unregister() } })

在Chrome开发者工具上，我有以下内容：

Chrome => Dev Tools => Application => Service Workers =>重新加载时更新（选定）

我不知道如何避免控制台中的错误，有人可以帮我吗？

谢谢！

Answer 1

public文件夹中的所有内容均在构建后位于应用程序的根文件夹中。

因此您的网址应为：const swLocation = '/sw-config.js';