Question

使用惰性插件，我试图添加公用文件夹，以保存我的CSS，JS文件。但是在我的视图文件夹中，我无法访问它们。我正在使用车把。即使我只将 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

您必须定义一条路径来提供公用文件夹的内容。

这可以通过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

1 个答案: