PWA 的路由器部分在设备上打开空白(使用 Vue) [英] Router part of PWA opens blank on device (with Vue)

问题描述

我基于 Vue 构建了 2 个 PWA(使用 Vue UI 模板，已经设置了路由器和 PWA)但是我遇到了同样的问题:在我添加到设备上的主屏幕后，当我从应用程序图标打开它时，路由器 viez 不显示并保持空白，直到我单击路由器链接.我不明白为什么.

I built 2 PWA based on Vue (with Vue UI templates, with router and PWA already set up) but I get on both the same issue: after I add to Homescreen on device, when I open it from the app icon, the router viez doesn't show up and stays blank until I click on a router link. I don't understand why.

其中一个例子，我的投资组合:

Example of one of them, my portfolio:

网址 链接

GitHub 链接

我认为与此问题相关的文件的某些部分:

Some parts of files here that I think related to the issue:

router.js:

export default new Router({
  mode: 'history',
  base: 'index.html',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

firebase.json:

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

推荐答案

查看下面的@webmint 答案，可能会以更好、更干净的方式解决问题.

Checkout @webmint answer below, probably solve problem im better and clean way.

原帖:

我解决了在路由中为起始页添加别名的问题(在我的例子中是登录")

I solved my problem adding an alias to start page in routes (in my case "Login")

在 manifest.json 中:

in manifest.json:

{
...
"start_url": "index.html",
...
}

在路由器配置中:

let router = new Router({
...
  routes: [
    {   path: '/index.html',
        component: Login,
        alias: '/'
    },
    {
        path: '/',
        name: 'login',
        component: Login
    },
...

这篇关于PWA 的路由器部分在设备上打开空白(使用 Vue)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！