带有静态HTML的Node + Express。如何将所有请求路由到index.html?

时间:2014-10-13 21:55:56

标签: javascript node.js express

我正在使用Node + Express和Handlebars进行模板化的单页Web应用程序。目前一切都运行良好,从index.html,这是一个非常标准的server.js文件:

var express = require('express');

var server = express();
server.use(express.static(__dirname + '/public'));

var port = 10001;
server.listen(port, function() {
    console.log('server listening on port ' + port);
});

http://localhost:10001/加载时,此功能非常有效。我的问题是我在应用程序中使用推送状态,因此浏览器可能会显示http://localhost:10001/foo/bar之类的网址,然后如果我刷新页面,则会收到错误Cannot GET /foo/bar,因为没有路由此

所以我的问题,请原谅我在Node上的令人难以置信的无声,我可以这样做所有请求路由到index.html吗?我的应用中的JavaScript可以根据页面加载时的URL参数显示正确的内容。我不想定义自定义路由,因为数字会很大,并且它们的路径可以动态改变。

5 个答案:

答案 0 :(得分:37)

const express = require('express')
const server = express()

/* route requests for static files to appropriate directory */
server.use('/public', express.static(__dirname + '/static-files-dir'))

/* other routes defined before catch-all */
server.get('/some-route', (req, res) => {
  res.send('ok')
})

/* final catch-all route to index.html defined last */
server.get('/*', (req, res) => {
  res.sendFile(__dirname + '/index.html');
})

const port = 8000;
server.listen(port, function() {
  console.log('server listening on port ' + port)
})

答案 1 :(得分:7)

var app = express();

var options = {
  dotfiles: 'ignore',
  etag: true,
  extensions: ['htm', 'html'],
  index: 'index.html',
  lastModified: true,
  maxAge: '1d',
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now());
    res.header('Cache-Control', 'public, max-age=1d');
  }
};

app.use(compression());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(methodOverride());

app.use('/', express.static(__dirname + '/public', options));
app.use('*', express.static(__dirname + '/public', options));

答案 2 :(得分:6)

此模式将在达到为前端应用程序提供服务的catch-all路由之前提供静态资产。要注册任何其他路线,只需将它们添加到全能路线上方。

var express = require('express');
var server = express();

// middleware
server.use(express.static(__dirname + '/public'));

// routes
server.use('*', function (req, res) {
  // serve file
});

var port = 10001;
server.listen(port, function() {
  console.log('server listening on port ' + port);
});

答案 3 :(得分:4)

这个简短的事情会起作用:

import express from "express";

const app = express(),
      staticServe = express.static(`${ __dirname }/public`);

app.use("/", staticServe);
app.use("*", staticServe);

确保HTML / JS文件中的所有网址都是绝对的,因为所有不存在的资源都会返回index.html个文件。

Express v 4.15.2

答案 4 :(得分:1)

var express = require('express');

var server = express();
server.use(express.static(__dirname + '/public'));

server.get('*', function(req, res){
  res.sendFile('index.html');
});

var port = 10001;
server.listen(port, function() {
    console.log('server listening on port ' + port);
});