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

【问题标题】：PWA doesn't load when router is in history mode (Vue CLI 3 based project)路由器处于历史模式时不加载 PWA（基于 Vue CLI 3 的项目）
【发布时间】：2019-05-17 06:03:29
【问题描述】：

我有一个基于 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");

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

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

谢谢

【问题讨论】：

标签： vue.js progressive-web-apps vue-cli workbox workbox-webpack-plugin

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试/index.html 而不是index.html。

【讨论】：