Router part of PWA opens blank on device (with Vue) - vue.js

Question

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:
URL Link
GitHub Link
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"
}
]

Answer 1

Edit:
Checkout #webmint answer below, probably solve problem im better and clean way.
Orginal Post:
I solved my problem adding an alias to start page in routes (in my case "Login")
in manifest.json:
{
...
"start_url": "index.html",
...
}
in router config:
let router = new Router({
...
routes: [
{ path: '/index.html',
component: Login,
alias: '/'
},
{
path: '/',
name: 'login',
component: Login
},
...

Answer 2

Had same issue. Turns out that solution is quite simple. You have to add/change this in manifest.json
"start_url": "/",
"scope": "/"

Answer 3

At the risk of repeating kaligari's answer, I'd say that the required part is only
{ path: '/index.html', component: Home }
in the router config. You can also use an alias to make it look better on the client. Although, when used as a PWA, this makes no difference since the address bar is not visible.
{ path: '/index.html', component: Home, alias: '/' }

Answer 4

Add the following to your vue.config.js:
pwa: {
workboxOptions: {
navigateFallback: '/index.html',
},
},

Answer 5

If it can help someone, here is what worked for me (after trying a lot of the above solutions and other ones on the web...) :
Context: PWA with Vue.js CLI 3.
Problem: After installing the URL on the "desktop" through the "Add to home screen" option in Safari, clicking on the icon opened a white page.
The same on Android (Chrome) was working perfectly.
I solved it with the following config:
manifest.json
...
"start_url": "/index.html",
...
router.json (includes some Firebase config elements)
//......
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',
},
}
};