在 hapi.js 上添加 CSS 无效

Question

使用 inert 插件，我尝试添加 public 文件夹，我在其中保存 css, js 文件。但是在我的 views 文件夹中我无法访问它们。我正在使用车把。即使我只保留 style.css 在 views 文件夹中仍然 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>

style.css

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

Answer 1

您必须定义一个路由来为您的 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" />

在 hapi.js 上添加 CSS 无效

Adding CSS on hapi.js is not woking

javascript

html

css

node.js

hapijs