Vue router on page refresh gets 404

Question

I am using Vue router with history mode. On button click on the current page I route it to next page. On second page when i reload i get a 404. Is there a way to handle this in

Answer 1

you can use hash mode inested of history mode to resolve the problem on your router

let router = new Router({
    mode: "hash",
  routes: [
    {
    //and the urls with path on here ...

Answer 2

We have resolved this on backend, we have filter where we intercept the request and redirect it to home page. We have made it configurable.

Answer 3

This is related to how the history mode in Vue Router works. I have created a writeup about it, with a solution as well.

Depends on your server implementation you need to enable URL Rewrites there. Here's how this would be implemented using Express/Node.js:

const express = require('express');
const app = express();
const port = 80;
const buildLocation = 'dist';
app.use(express.static(`${buildLocation}`));
app.use((req, res, next) => {
  if (!req.originalUrl.includes(buildLocation)) {
    res.sendFile(`${__dirname}/${buildLocation}/index.html`);
  } else {
    next();
  }
});
app.listen(port, () => console.info(`Server running on port ${port}`));

For more info, check out https://blog.fullstacktraining.com/404-after-refreshing-the-browser-for-angular-vue-js-app/. HTH

Answer 4

if any one of is facing the issue even after trying above solution, please find below method. If you have vue.config.js which has

module.exports = {
  publicPath: process.env.PUBLIC_URL || "", // <-- this is wrong
  ...
};

either remove the vue.config.js or try removing the publicPath from the exports object.

Also you can try below method if you dont want to remove the publicPath

module.exports = {
  publicPath: process.env.PUBLIC_URL || "/", // <-- this is correct now (and default)
  transpileDependencies: ["vuetify"],
};