Question

我基于Vue构建了2个PWA（具有Vue UI模板，已经设置了路由器和PWA），但是我遇到了两个相同的问题：在设备上添加到主屏幕后，当我从应用程序图标打开它时，直到我单击路由器链接，路由器视图才会显示并保持空白。我不明白为什么。

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

GitHub Link

我认为文件中与该问题有关的某些部分：

router.js ：

java -Dfile.encoding=UTF-8 ...

firebase.json ：

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

Answer 1

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

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

Answer 2

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

中添加/更改它

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

Answer 3

我解决了在路由的起始页中添加别名的问题（在我的情况下为“登录”）

在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

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

上下文：具有Vue.js CLI 3的PWA。

问题：通过Safari中的“添加到主屏幕”选项将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）

5 个答案: