Fatal编程技术网
  • javascript/
  • Javascript 在hapi.js上添加CSS是行不通的

Javascript 在hapi.js上添加CSS是行不通的

javascript html css node.js

Javascript 在hapi.js上添加CSS是行不通的,javascript,html,css,node.js,hapijs,Javascript,Html,Css,Node.js,Hapijs,使用惰性插件，我试图添加保存css、js文件的公用文件夹。但是在我的视图文件夹中，我无法访问它们。我在用把手。即使我只保留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.ar

使用惰性插件，我试图添加保存css、js文件的公用文件夹。但是在我的视图文件夹中，我无法访问它们。我在用把手。即使我只保留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')

    });

}

body {
background: #456;
font-family: 'Open Sans', sans-serif;
}
我尝试在服务器上添加相对路径，如下所示：

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>
您必须定义一个路由来为公用文件夹的内容提供服务

这可以通过以下方式完成：

const init=async（）=>{
等待服务器。注册（vision）；
等待服务器。注册（惰性）；
server.views（…）
服务器路由({
方法：“GET”，
路径：'/public/{param*}'，
处理程序：{
目录：{
path:path.join（uu dirname，'public'）
}
}
})
}
这将创建一个路由，该路由将为
public
目录中的任何内容提供服务，因此您的css将可以通过

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

您必须定义一个路由来为公用文件夹的内容提供服务

这可以通过以下方式完成：

const init=async（）=>{
等待服务器。注册（vision）；
等待服务器。注册（惰性）；
server.views（…）
服务器路由({
方法：“GET”，
路径：'/public/{param*}'，
处理程序：{
目录：{
path:path.join（uu dirname，'public'）
}
}
})
}
这将创建一个路由，该路由将为
public
目录中的任何内容提供服务，因此您的css将可以通过

这意味着您不必使用相对路径访问样式表，并且可以在home.html中使用绝对路径：
成功了，谢谢。但是，如果我不想把这个路由保存在app.js文件中，而是想把它保存在routes文件夹中的user.js文件中，会怎么样？为此，我是否必须将html链接更改为
href=“../public/css/style.css”
？我试过了，但没用。我已经修改了我的文件夹结构。请仔细查看提供静态内容的路由通常与模板文件没有关系，事实上，
routes.files.relativeTo
指令只告诉hapi在路由处理程序中调用
h.view
时使用您提供的路径，路径将从
relative解析为
，因此它只在服务器内部有效，而不是从客户端（例如：视图）有效。user.js文件做什么？
user.js
包含我的所有server.routes，即
返回h.view（“home”）文件
。我将它们导出到
app.js
上使用。我通过将目录路径更改为
path.join（\uu dirname，../public'）
解决了这个问题，谢谢。但是，如果我不想把这个路由保存在app.js文件中，而是想把它保存在routes文件夹中的user.js文件中，会怎么样？为此，我是否必须将html链接更改为
href=“../public/css/style.css”
？我试过了，但没用。我已经修改了我的文件夹结构。请仔细查看提供静态内容的路由通常与模板文件没有关系，事实上，
routes.files.relativeTo
指令只告诉hapi在路由处理程序中调用
h.view
时使用您提供的路径，路径将从
relative解析为
，因此它只在服务器内部有效，而不是从客户端（例如：视图）有效。user.js文件做什么？
user.js
包含我的所有server.routes，即
返回h.view（“home”）文件
。我将它们导出到
app.js
上使用。我通过将目录路径更改为
path.join（\uu dirname，../public'）