gpt4 book ai didi

javascript - 在 hapi.js 上添加 CSS 不起作用

转载 作者:行者123 更新时间:2023-11-28 14:21:01 25 4
gpt4 key购买 nike

使用 inert 插件,我尝试添加我保存 css、js 文件的公共(public)文件夹。但是在我的 views 文件夹中,我无法访问它们。我正在使用 Handlebars 。即使我只保留 views 文件夹中的 style.css 仍然 html 无法访问该样式文件。

这是我的文件夹结构:

app.js
public
css
style.css
views
home.html
routes
user.js

App.js

const server = hapi.server({
port: Number(process.argv[2] || 3000),
});
const init = async () => {

await server.register(vision);
await server.register(inert);
server.views({
engines: {
html: handlebars
},
path: path.join(__dirname, 'views'),
relativeTo: path.join(__dirname, 'public')

});

}

我也尝试在服务器上添加相对路径,如下所示:

const server = hapi.server({
port: Number(process.argv[2] || 3000),
routes: {
files: {
relativeTo: Path.join(__dirname, 'public')
}
}
});

但徒劳无功。

Home.html

<html>
<head>
<title>Login page</title>
<link rel="stylesheet" href="../css/style.css" />
</head>
<body>
<h2> Welcome </h2>
</body>
</html>

样式.css

body {
background: #456;
font-family: 'Open Sans', sans-serif;
}

最佳答案

您必须定义一个路由来提供公共(public)文件夹的内容。

这可以通过 Directory Handler 来完成:

const init = async () => {
await server.register(vision);
await server.register(inert);

server.views(...)

server.route({
method: 'GET',
path: '/public/{param*}',
handler: {
directory: {
path: path.join(__dirname, 'public')
}
}
})
}

这将创建一个路由,该路由将为 public 目录中的任何内容提供服务,因此您的 css 可以通过 http://localhost:3000/public/css/style.css 访问.

这意味着您不必使用相对路径访问样式表,并且可以在您的 home.html 中使用绝对路径:

<link rel="stylesheet" href="/public/css/style.css" />

关于javascript - 在 hapi.js 上添加 CSS 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55198731/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com