Refresing a vue app gives: Cannot GET /path

You trying to use history mode of router without backend. For getting things working, you may use Express JS. Previous answer is not working for me and i write my own server script. Here is the my server.js for running Vue app with history mode. server.js (with Express):

const express = require('express');
const path = require('path');
const history = require('connect-history-api-fallback');

const app = express();

const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));

app.use(staticFileMiddleware);
app.use(history({
  disableDotRule: true,
  verbose: true
}));
app.use(staticFileMiddleware);

app.get('/', function (req, res) {
  res.render(path.join(__dirname + '/dist/index.html'));
});

var server = app.listen(process.env.PORT || 8080, function () {
  var port = server.address().port;
  console.log("App now running on port", port);
});

Place this file in the root directory of your project (not src).

Run this script with Node: node server.js

Don't forget build your app for production ;)!


I think your vue-router is in HTML5 History Mode. https://router.vuejs.org/en/essentials/history-mode.html

In development mode, the webpack-dev-server handles the redirect for your but your need to configure your server used in production to redirect your routes.