Hapi.js 视图不加载 css 文件答案

【问题标题】：Hapi.js views not loading css filesHapi.js 视图不加载 css 文件
【发布时间】：2016-10-31 14:33:33
【问题描述】：

我在使用hapijs 和handlebars.js 将我的app.css 文件链接到我的default.html 视图时遇到问题。我使用 Cloud9 进行托管。

这是我的应用结构：

root/
   client/
      config/
         route.js
      css/
         app.css
      view/
         layout/
            default.html
         index.html
server.js

我的server.js

'use strict';

const Hapi      = require('hapi');
const Vision    = require('vision');
const Inert     = require('inert');
const Path      = require('path');
const Routes    = require('./client/config/route')

const server = new Hapi.Server();

server.connection({
    host: process.env.IP || '0.0.0.0',
    port: process.env.PORT || 3000
});

server.register([Vision, Inert], (err) => {
    if (err) {
        throw err;
    }

    server.views({
        engines: {
            html: require('handlebars')
        },
        relativeTo: Path.join(__dirname, 'client'),
        path: 'views',
        layoutPath: 'views/layouts',
        layout: 'default', // true
        partialsPath: 'views/partials'
    });

    server.route(Routes);
});

server.start(() => {
    console.log('Server started at: ' + server.info.uri);
});

我的route.js：

const Path  = require('path');

const routes = [
    {
        method: 'GET',
        path: '/{param*}',
        handler: {
            directory: {
                path: Path.join(__dirname, 'client'),
                listing: false,
                index: false
            }
        }
    },
    {
        method: 'GET',
        path: '/',
        handler: (req, rep) => {

            let data = { };                
            rep.view('index', data);
        }
    }
];

module.exports = routes;

我的default.html：

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <link rel="stylesheet" href="../../css/app.css" />
    </head>
    <body>
        {{{content}}}
    </body>
</html>

我的index.html：

<p id="paragraph"><p>

问题是我的app.css 无法加载。我关注了this advice 和this one，但它仍然不起作用，我不知道接下来要检查什么。

【问题讨论】：

抱歉没有仔细阅读代码

标签： javascript html css handlebars.js hapijs

【解决方案1】：

您可以编写单独的路由来提供资源文件

如果css 和js 文件夹位于resources 文件夹中，则

server.route({
path: "/resources/{path*}",
method: "GET",
handler: {
    directory: {
        path: "./resources",
        listing: false,
        index: false
    }
}});

这条路线将为您提供静态内容，然后您可以将这些文件添加到您的 html 文件中。

<link rel="stylesheet" href="resources/css/main.css" />

【讨论】：

【解决方案2】：

正如吉恩·迪亚兹告诉你的那样：

把它放在你的 default.html 的 head 部分

<link rel="stylesheet" type="text/css" link="your_file_name.css"/>

【讨论】：

【解决方案3】：

试试这个<link rel="stylesheet" href="/css/app.css" />

【讨论】：