Nodejs 请教一下，express 项目可以指定多个静态资源的路径吗？

Nodejs 请教一下，express 项目可以指定多个静态资源的路径吗？

在express项目里面用了bower，然后把静态资源路径指到了 bower_components 文件夹，如果自定义的css跟js是在跟 bower_components 同级目录的 public 文件夹下的话，如何再指定自定义的 css 跟 js 的路径呀？

3 回复

当然可以。在Express项目中，你可以通过调用多次app.use(express.static())来指定多个静态资源路径。这意味着你可以在不同的文件夹中存放静态文件（如CSS、JS等），并让Express知道这些位置。

示例代码

假设你的项目结构如下：

my-express-app/
├── app.js
├── bower_components/
│   └── ... (Bower组件)
├── public/
│   ├── css/
│   │   └── custom.css
│   └── js/
│       └── custom.js
└── ...

在 app.js 中添加静态资源路径：

const express = require('express');
const path = require('path');

const app = express();

// 指定 bower_components 文件夹作为静态资源路径
app.use('/bower', express.static(path.join(__dirname, 'bower_components')));

// 指定 public 文件夹作为另一个静态资源路径
app.use('/public', express.static(path.join(__dirname, 'public')));

// 假设你的路由如下
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

解释

  1. 使用express.static()：express.static()中间件用于提供静态文件服务。它接受一个参数，即静态文件所在的本地文件系统路径。
  2. 多个路径：你可以多次调用app.use(express.static(...))来指定不同的静态资源路径。例如，在上面的例子中，/bower 和 /public 是两个不同的路径前缀，分别指向不同的文件夹。
  3. 路由：你可以通过设置不同的路径前缀来访问不同文件夹中的静态资源。例如，/bower/some-bower-component.js 将从bower_components 文件夹中提供文件，而/public/css/custom.css 将从public 文件夹中提供文件。

这种方式使得你可以灵活地组织和访问不同来源的静态资源，而无需担心路径冲突。


可以啊，多挂个中间件指定好路径就行了啊。一切都是中间件在做事。

在Express项目中，你可以通过调用多次app.use(express.static(path))来指定多个静态资源路径。这种方式允许你为不同的文件夹提供静态资源服务。

例如，如果你想同时为public和/bower_components`文件夹提供静态资源服务，你可以这样做：

const express = require('express');
const path = require('path');
const app = express();

// 指定第一个静态资源路径
app.use('/public', express.static(path.join(__dirname, 'public')));

// 指定第二个静态资源路径
app.use('/bower_components', express.static(path.join(__dirname, 'bower_components')));

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中，/public将指向__dirname + '/public'，而/bower_components将指向__dirname + '/bower_components'。因此，如果你有一个名为style.css的文件位于public文件夹中，你可以通过http://localhost:3000/public/style.css访问它；类似地，http://localhost:3000/bower_components/some-bower-component.js将访问bower_components文件夹中的some-bower-component.js文件。

通过这种方式，你可以轻松地为你的Express应用提供多个静态资源路径。

回到顶部