PWA 的路由器部分在设备上打开空白（使用 Vue）

Question

我基于 Vue 构建了 2 个 PWA（使用 Vue UI 模板，路由器和 PWA 已经设置好）但是我遇到了同样的问题：在我添加到设备上的主屏幕之后，当我打开它来自应用程序图标，路由器 viez 不会显示并保持空白，直到我单击路由器 link。我不明白为什么。

其中之一的示例，我的投资组合：

URL Link

GitHub Link

我认为与此问题相关的部分文件：

router.js:

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

firebase.json:

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

Answer 1

有同样的问题。事实证明，解决方案非常简单。您必须在 manifest.json

中 add/change

"start_url": "/",
"scope": "/"

Answer 2

将以下内容添加到您的vue.config.js：

pwa: {
  workboxOptions: {
    navigateFallback: '/index.html',
  },
},

Answer 3

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

原文Post:

我解决了在路由中添加别名到起始页的问题（在我的例子中是“登录”）

在manifest.json中：

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

在路由器配置中：

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

Answer 4

冒着重复 kaligari 的回答的风险，我会说所需的部分只是

{ path: '/index.html', component: Home }

在路由器配置中。您还可以使用别名使其在客户端上看起来更好。虽然，当用作 PWA 时，这没有任何区别，因为地址栏不可见。

{ path: '/index.html', component: Home, alias: '/' }

Answer 5

如果它可以帮助某人，这就是对我有用的（在尝试了很多上述解决方案和网络上的其他解决方案之后......）：

上下文： PWA 与 Vue.js CLI 3.

问题：在Safari中通过"Add to home screen"选项在"desktop"上安装URL后，点击图标打开了一个白色页。

Android (Chrome) 上的相同功能运行良好。

我用下面的配置解决了它：

manifest.json

  ...
  "start_url": "/index.html",
  ...

router.json（包括一些 Firebase 配置元素）

//......
const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            redirect: {
                path: '/projects'
            }
        },
        {
            path: '/login',
            name: 'Login',
            component: Login,
        },
        {
            path: '/projects',
            name: 'Projects',
            component: Projects,
            meta: {
                requiresAuth: true
            }
        },
        //......
    ]
});

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(x => x.meta.requiresAuth);
    const currentUser = firebase.auth().currentUser;

    if (requiresAuth && !currentUser) {
        next('/login');
    } else if (requiresAuth && currentUser) {
        next();
    } else {
        next();
    }
});

export default router;

vue.config.js

module.exports = {
    pwa: {
        name: 'Xxxxxxxxxx',
        themeColor: '#000000',
        msTileColor: '#000000',
        appleMobileWebAppCapable: 'yes',
        appleMobileWebAppStatusBarStyle: 'black',
        workboxOptions: {
            navigateFallback: '/index.html',
        },
    }
};

PWA 的路由器部分在设备上打开空白（使用 Vue）

Router part of PWA opens blank on device (with Vue)

router

vue.js

progressive-web-apps