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?
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.
