Nút + Express với HTML tĩnh. Cách định tuyến tất cả các yêu cầu tới index.html?

Question

Tôi đang làm việc trên một ứng dụng web một trang bằng cách sử dụng Node + Express và handelbars cho tempalting. Mọi thứ hiện hoạt động tốt từ tệp index.html được phân phối từ tệp server.js khá chuẩn:

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

Điều này hoạt động hoàn hảo khi tải từ http://localhost:10001/. Vấn đề của tôi là tôi đang sử dụng trạng thái đẩy trong ứng dụng, vì vậy trình duyệt có thể hiển thị URL như http://localhost:10001/foo/bar và sau đó nếu tôi làm mới trang, tôi nhận được lỗi Cannot GET /foo/bar vì không có tuyến đường cho điều này.

Vì vậy, câu hỏi của tôi, và tha thứ cho sự noobishness đáng kinh ngạc của tôi khi nói đến nút, tôi có thể làm cho nó để tất cả các yêu cầu tuyến đường đến index.html? JavaScript trong ứng dụng của tôi có thể xử lý hiển thị đúng nội dung dựa trên thông số URL khi tải trang. Tôi không muốn xác định các tuyến tùy chỉnh vì số lượng sẽ lớn và các đường dẫn cho chúng có thể thay đổi động.

Answer 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); 
}); 

Answer 2

var express = require('express'); 

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

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

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

Answer 3

mô hình này sẽ đóng vai trò tài sản tĩnh trước khi nhấn nhận tất cả tuyến đường phục vụ lên ứng dụng front-end của bạn. Để đăng ký bất kỳ tuyến đường bổ sung nào, chỉ cần thêm chúng trên tuyến đường bắt tất cả.

var express = require('express'); 
var static = require('serve-static'); 
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); 
}); 

Answer 4

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

Answer 5

điều ngắn này sẽ làm việc:

import express from "express"; 

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

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

Chỉ cần chắc chắn rằng tất cả các URL từ HTML/JS là tuyệt đối bây giờ, khi mọi nguồn lực mà không tồn tại sẽ trở lại index.html tập tin .

Express v 4.15.2