当路由器处于历史模式时 PWA 不加载(基于 Vue CLI 3 的项目) [英] PWA doesn't load when router is in history mode (Vue CLI 3 based project)

问题描述

我有一个基于 Vue CLI 3 的应用程序，我想将其用作 PWA.我需要它在历史模式下工作，因为哈希干预重定向，我正在做的重定向是基于 OAuth 的身份验证过程的一部分.

I have a Vue CLI 3 based app which I would like to function as a PWA. I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process.

当路由处于散列模式时，它会设法加载为 PWA.一旦我将模式更改为历史记录"，我安装的 PWA 将不再加载——而是出现白屏.我检查了浏览器版本，它仍然可以正常工作(我将 NGINX 服务器中的回退配置为 index.html).起初我使用了 vue CLI 项目和 PWA 插件提供的默认设置.在做了一些研究之后，我在 vue.config.js 中添加了以下内容:

When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to index.html). At first I used the default settings provided with vue CLI project and the PWA plugin. After doing some research, I added the following to my vue.config.js:

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

并且我看到确实在 service-worker.js 中添加了以下内容:

and I saw that the following was indeed added to service-worker.js:

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

但它仍然没有帮助.即使应用在我的移动设备的主屏幕上成功注册，它也不会运行，除非我将路由更改回散列模式.

but it still didn't help. Even though the app registers successfully on my mobile device's homescreen, it just won't run unless I change the routing back to hash mode.

有人知道我可能遗漏了什么吗?

Does anyone have a clue what I might be missing?

谢谢

推荐答案

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

I have the same problem, i solved it by adding this in the end of my router.js

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

这篇关于当路由器处于历史模式时 PWA 不加载(基于 Vue CLI 3 的项目)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！