Question

我使用express编写了一个Node.js应用程序。当我请求/时，我想提供/public/app/index.html。这有效。但是，index.html包含两个css和两个js文件，并且相对路径中断。路径设置如此（在HTML标头中），但在尝试获取app.js和style.css时，（浏览器？）会考虑查看/，因为当然，＆＃ 39;什么是服务。

<link rel='stylesheet' href='/lib/lib.css'/>
<link rel='stylesheet' href='style.css'/>
<script type="application/javascript" src="/lib/lib.js"></script>
<script type="application/javascript" src="app.js"></script>

我之所以对我的HTML使用构建过程是个问题的原因，当时将所有构建的文件转储到一个文件夹（HTML，CSS，JS，图像）是合乎逻辑的。这样，可以使用模板HTML文件，该文件始终在其自己的文件夹中指向js和css。我希望我能避免使用相对路径注入脚本。

文件夹结构

root/
├── public/
│   ├── lib/
|   |    ├── lib.js
|   |    └── lib.css
│   ├── app/
│   |    ├── index.html
│   |    ├── style.css
|   |    └── app.js
├── app.js
├── routes/
|     └── index.js

app.js

var app = express();
var server = app.listen(4100);
app.use(express.static(path.join(__dirname, 'public')));
// routes
var index = require('./routes/index');
app.use('/', index);

index.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    var path = 'index.html';
    var options = {
        root : './public/app/'
    };
    res.sendFile(path, options, function(err){
        console.log(err)
    });
});

module.exports = router;

Answer 1

您可以为每个页面添加一个单独的静态中间件：

// The "users" page.
app.use('/users', express.static(path.join(__dirname, 'public/users')));

// The "app" page.
app.use('/', express.static(path.join(__dirname, 'public/app')));

// Handle the rest of the static resources:
app.use(express.static(path.join(__dirname, 'public')));

为防止出现问题，您声明问题的顺序很重要（＆＃34;更具体的＆＃34;路由应首先声明）。

使用这样的设置，您不必再包含单独的router.get('/', ...)，只是为public/app/index.html提供服务。

Answer 2

你去吧

//Usefull to build the absolute Path
const path = require('path')

//Seperated Configuration
const configuration = {
  directory: './public/'
}

//Serve the index.html
app.get("/", function(req, res) {
  res.sendfile(path.join(__dirname, configuration.directory) + 'index.html')
});

//Serve other content
let staticPath = path.join(__dirname, configuration.directory);
app.use(express.static(staticPath));

app.listen etc ...

使用Express提供静态文件

2 个答案: