Question

我有一个基于Vue CLI 3的应用程序，我想用作PWA。我需要它在历史记录模式下工作，因为在基于OAuth的身份验证过程中，哈希会介入重定向过程。

当路由处于散列模式时，管理程序将加载为PWA。将模式更改为“历史记录”后，我安装的PWA将不再加载-我得到的是白屏。我检查了浏览器的版本，它仍然可以正常工作（我将NGINX服务器中的后备配置为index.html）。最初，我使用vue CLI项目和PWA插件提供的默认设置。经过研究后，我在vue.config.js中添加了以下内容：

pwa: {                     
  workboxOptions: {
    skipWaiting: true,
    navigateFallback: 'index.html'
  }
}

我发现确实在service-worker.js中添加了以下内容：

workbox.skipWaiting();    
...
workbox.routing.registerNavigationRoute("index.html");

但是它仍然没有帮助。即使该应用程序已成功在我的移动设备的主屏幕上注册，但除非将路由更改回哈希模式，否则它将无法运行。

有人知道我可能会缺少什么吗？

谢谢

Answer 1

我有同样的问题，我通过在router.js的末尾添加它来解决了

{
  path: '*', // or '/index.html'
  beforeEnter: (to, from, next) => {
    next('/')
  }
}

Answer 2

尝试使用/index.html代替index.html。

路由器处于历史记录模式时，PWA不加载（基于Vue CLI 3的项目）

2 个答案: