A routing problem with workbox vuejs in production and express

Question

I am creating a forum application to learn about VueRouter in Express. What I am trying to do is create a routing in vuejs and then take it to production. When I compile everything works fine. The view files go directly to the public folder in express and work almost perfect. I can change the route perfectly but when I touch CTRL + F5 from a different route to the main one, it returns a GET error.

For example this is my index and work perfect:

I can even change the route:

I touch F5 and reload the page without any problem, but when I touch CTRL + F5 to make the request again, obviously it returns an error because I don't have the route declared in express,

but vuejs returns only one html index as a view, I can't render any other files because they don't exist.

These public folder at image are the files created by vue by the build command:

This is my express configuration:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersNotifications = require('./routes/notifications');
var usersNotifications = require('./routes/notifications');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/notifications', usersNotifications);

module.exports = app;

this is my index route on express:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index');
});

module.exports = router;

The only option I have is to render the only index that vuejs offers. How can i Fix that?

The other problem is that I would not like these console workbox messages, how can i remove them so they never appear:

and this is the vuejs registerServiceWorkers.js file:

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
    register(`${process.env.BASE_URL}service-worker.js`, {
      /***
      * Note that here were some methods also display messages 
      * on the console and I deleted them. Methods like
      */
    })
}

Any ideas?

Answer 1

Since vue router is handling page routing, you'll have to render index for all requested paths like:

router.get('*', function(req, res, next) {
    res.render('index');
});

// in server
app.use('*', indexRouter);

If you're exposing other endpoints from server you'll have to mount this as the last route middleware like, say in your case:

app.use('/notifications', usersNotifications);
app.use('*', indexRouter);