Refresing a vue app gives: Cannot GET /path

Question

I have a simple webpack template vue app, and let's say I have a page with

http://localhost:8080/profile

On my local page, I can go from any page to /profile and even once on /profile I can refresh/reload the page and I get no error.

But I deployed my app on heroku and even though I can navigate from any page to any other, but if I am for example on /profile page and I hit refresh i get

Cannot GET /statement

what could be the problem?

Answer 1

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.

Answer 2

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 ;)!