适用于Vue.js应用程序的正确NodeJS服务器

Question

I'm using Vue.js and the vue-router and would like to server the static files via Node.JS . So I've create server.js with the following code:

// server.js
var express = require('express');

var path = require('path');

var serveStatic = require('serve-static');

app = express();
app.use(serveStatic(__dirname + "/dist"));

var port = process.env.PORT || 5000;

app.listen(port);

console.log('server started '+ port);

It seems to work, but only when I click around. If I visit ex. my-url.com/some-path/another-path it fails.

Am I missing something?

Ex. I'm getting:

Cannot GET /cars with I type www.my-domain.com/cars into the address bar in the browser, but visiting www.my-domain.com and clicking on cars does work.

Answer 1

You need to setup your server to redirect users to the appropriate server location. Please read the Vue Router - HTML5 History Mode docs .

When using history mode, the URL will look "normal," eg http://oursite.com/user/id . Beautiful!

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

The main thing that you need to do is have all routes lead to the root route. Alternatively, since you are using Express, you can leverage the connect-history-api-fallback which the Vue Router docs recommend .