无法将任何文件附加到 HTML答案

【问题标题】：Unable to attach any file to an HTML无法将任何文件附加到 HTML
【发布时间】：2016-10-20 21:12:20
【问题描述】：

基于the tutorials，我尝试通过 HapiJS 在 NodeJS 中设置一个基本服务器。

初始化如下：

    //globals
    mainAddr = "MoriMachine";
    mainPort = 3000;

    require('./backend/app.js')

这是app.js的内容：

    const Hapi = require('hapi');
    const server = new Hapi.Server();

    server.connection({host: mainAddr, port: mainPort });
    server.register(require('inert'), (err) => {
        if (err) { throw err; }
        server.route({
            method: 'GET',
            path: '/',
            handler: function (request, reply) {
                reply.file('./public/index/index.html');
            }
        });
    });

    server.start((err) => {
        if (err) { throw err; }
        console.log(`Server running at: ${server.info.uri}`);
    });

虽然 index.html 也同样小：

            <!DOCTYPE html>
            <html>
                <head>
                    <script src="index.js"></script>
                </head>
                <body>
                <h1>HELLO WORLD!! -3-</h1>
                    <img src="test.jpg"></img>
                </body>
            </html>

在项目本身里面有init.js和三个文件夹：

node_modules：原因很明显
后端：包含 app.js
public：包含文件夹“index”，其中包含 HTML、JS 和我尝试附加的图片。

问题是无论我尝试什么路径，当我运行服务器时，JS和图片都找不到。

是什么原因？我想添加一些额外的功能吗？

【问题讨论】：

您需要从后端提供静态文件。看看这个文档：hapijs.com/tutorials/serving-files
@Sharko 哎哟，这是可能的。这不是我第一次混淆后端和前端。

标签： javascript node.js hapijs static-files

【解决方案1】：

原因是您只有一条路线服务于一个特定文件。当您访问路由“/”时，您的浏览器会尝试访问“/index.js”和“/test.jpg”，而您没有响应这些路由。

一种方法是提供公共目录中的所有内容，如下所示：

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

现在您的 index.js 可以通过 /index/index.js 访问，并且您的图像可以通过 /index/test.jpg 访问

所以对您的 html 进行这些更改

        <!DOCTYPE html>
        <html>
            <head>
                <script src="/index/index.js"></script>
            </head>
            <body>
            <h1>HELLO WORLD!! -3-</h1>
                <img src="/index/test.jpg"></img>
            </body>
        </html>

请注意，通过这种方式您的 index.html 也可以通过 /index/index.html 访问

【讨论】：

有效！我已经想知道原因应该与此类似，但完全不确定。谢谢，这让我省去了很多挫折！