Nodejs中pug引擎如何加载静态文件？

发布于 1周前 作者 phonegap100 来自 nodejs/Nestjs

Nodejs中pug引擎如何加载静态文件？

node 环境下，利用 express+pug 开发一个页面，静态文件配置如下:

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

然后在 pug 模板中引入 css 文件：

link(href='/static/css/layout.css' type='text/css' rel='stylesheet')

这样的话，在开发环境下是正常的，但是当我部署到生产环境下，绑定在域名 www.aaa.com/bbb 的时候，静态文件仍然会访问 www.aaa.com/static/css/layout.css, 这种情况该怎么处理？

如果不用专门的静态服务器呢，只有三五个 css 文件不需要啊。


Harmonyos Next教程
8 回复

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base


额 把 /static 前面的斜杠去掉就行。

我是说 pug 模板里的斜杠

去掉斜杠的话，相对目录读取的是当前文件夹下的。

不过我找到解决方法了。
在 app.js 里：
<br>app.locals.assetUrl = function() { return config[env].assetHost;}<br>
然后在 pug 文件里
<br>link(href=assetUrl('/static/css/layout.css') type='text/css' rel='stylesheet')<br>

哈哈哈，我就是看隔壁的那个 kails 学会的

囧， md 写错了

囧， assetUrl 那个函数也写错了，没有把参数加进去， 应该是 function(asset) { return config[env].assetHost + asset; }

我想起了被 ci 中的 site_url 支配的日子

在Node.js中使用Pug（之前称为Jade）模板引擎时，加载静态文件（如CSS、JavaScript和图片）通常是通过设置Express框架的静态中间件来实现的。下面是一个简单的示例，展示了如何在Node.js应用中使用Pug模板引擎并加载静态文件。

首先，确保你已经安装了Express和Pug：

npm install express pug

然后，你可以创建一个简单的Node.js应用，如下所示：

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

// 设置Pug为模板引擎
app.set('view engine', 'pug');

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.render('index');
});

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

在这个例子中，public目录被设置为静态文件目录。你可以在public目录中放置CSS、JavaScript和图片文件。

接下来，创建一个Pug模板文件（例如views/index.pug），并在其中引用静态文件：

doctype html
html
  head
    link(rel='stylesheet', href='/styles.css')
  body
    h1 Hello, Pug!
    script(src='/scripts.js')

确保styles.css和scripts.js文件位于public目录中。这样，当你访问http://localhost:3000时，Pug模板将正确加载并应用静态文件。

回到顶部