如何允許客戶端從 Node.js + Express 服務器訪問任何 static 文件？

Question

這是我的 index.js 文件，稱為 node.js 服務器：

var express = require('express');
var app = express();
const PORT = process.env.PORT || 5000;
var serv = require('http').Server(app);
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/client/index.html');
});
app.use('/client', express.static(__dirname + '/client'));
serv.listen(PORT);

我正在使用 Angular 開發客戶端應用程序，當我構建應用程序時，我得到了許多客戶端文件。 我把它們放在客戶目錄上。

為了允許客戶端訪問這些文件，我添加了以下代碼：

app.get('/main-es5.js', function(req, res) {res.sendFile(__dirname + '/client/main-es5.js');});
app.get('/main-es2015.js', function(req, res) {res.sendFile(__dirname + '/client/main-es2015.js');});
app.get('/polyfills-es5.js', function(req, res) {res.sendFile(__dirname + '/client/polyfills-es5.js');});
app.get('/polyfills-es2015.js', function(req, res) {res.sendFile(__dirname + '/client/polyfills-es2015.js');});
app.get('/runtime-es5.js', function(req, res) {res.sendFile(__dirname + '/client/runtime-es5.js');});
app.get('/runtime-es2015.js', function(req, res) {res.sendFile(__dirname + '/client/runtime-es2015.js');});
app.get('/styles-es5.js', function(req, res) {res.sendFile(__dirname + '/client/styles-es5.js');});
app.get('/styles-es2015.js', function(req, res) {res.sendFile(__dirname + '/client/styles-es2015.js');});
app.get('/vendor-es5.js', function(req, res) {res.sendFile(__dirname + '/client/vendor-es5.js');});
app.get('/vendor-es2015.js', function(req, res) {res.sendFile(__dirname + '/client/vendor-es2015.js');});

app.get('/main-es5.js.map', function(req, res) {res.sendFile(__dirname + '/client/main-es5.js.map');});
app.get('/main-es2015.js.map', function(req, res) {res.sendFile(__dirname + '/client/main-es2015.js.map');});
app.get('/polyfills-es5.js.map', function(req, res) {res.sendFile(__dirname + '/client/polyfills-es5.js.map');});
app.get('/polyfills-es2015.js.map', function(req, res) {res.sendFile(__dirname + '/client/polyfills-es2015.js.map');});
app.get('/runtime-es5.js.map', function(req, res) {res.sendFile(__dirname + '/client/runtime-es5.js.map');});
app.get('/runtime-es2015.js.map', function(req, res) {res.sendFile(__dirname + '/client/runtime-es2015.js.map');});
app.get('/styles-es5.js.map', function(req, res) {res.sendFile(__dirname + '/client/styles-es5.js.map');});
app.get('/styles-es2015.js.map', function(req, res) {res.sendFile(__dirname + '/client/styles-es2015.js.map');});
app.get('/vendor-es5.js.map', function(req, res) {res.sendFile(__dirname + '/client/vendor-es5.js.map');});
app.get('/vendor-es2015.js.map', function(req, res) {res.sendFile(__dirname + '/client/vendor-es2015.js.map');});

如果沒有這么大的代碼塊，客戶端似乎無法訪問它。

我該如何重構它？

Answer 1

在構建應用程序時嘗試指定deploy-url

ng build --prod --deploy-url=/client

這將告訴 angular 從/client路徑而不是根路徑加載腳本和資產

由於您已經有了以下行，這應該可以工作。

app.use('/client', express.static(__dirname + '/client'));

Answer 2

將此添加到您的代碼中，客戶端可以訪問項目中的任何文件。

 app.use('*', (req, res) => { res.sendFile(__dirname + req.originalUrl) })