Question

我正在测试使用express.js显示主页（index.html页面）。当我直接从浏览器加载时，此索引页可以完美加载/呈现在浏览器上。但是，当我尝试通过express.js加载同一页面时，不会得到相同的效果。它仅以CSS样式逐行显示所有元素和图片。谁能让我知道丢失了什么？我正在加载的索引页来自模板。以下是带有路由的getwebapp.js文件。我只显示到索引页面的路线。

getwebapp.js内容：

const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();

app.use(express.static(path.join(__dirname + 'public')));

router.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));});

router.get('/about", function (req, res) {
    res.sendFile(path.join(__dirname + '/about.html'));});

app.use('/', router);
app.listen(8080, () => console.log('Listening on port 8080....'));
console.log('Server started at ' + Date());

index.html内容（上半部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- Styles -->
    <link rel="stylesheet" href="style.css">
    <script src="js/custom.js"></script>
</head>
<body>
   <header class="site-header">
     <div class="nav-bar">
        <div class="container">
            <div class="row">
               <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">
                  <div class="site-branding d-flex align-items-center">
                      <a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/logo.png" alt="logo"></a>
                       </div><!-- .site-branding -->

                       <nav class="site-navigation d-flex justify-content-end align-items-center">
                         <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-items-center">
                                <li class="current-menu-item"><a href="/">Home</a></li>
                                <li><a href="/about">About us</a></li>
                                <li><a href="/services">Services</a></li>
                                <li><a href="/news">News</a></li>
                                <li><a href="/contact">Contact</a></li>

                                <li class="call-btn button gradient-bg mt-3 mt-md-0">
                                    <a class="d-flex justify-content-center align-items-center" href="#"><img src="images/emergency-call.png"> +34 586 778 8892</a>
                                </li>
                            </ul>
                        </nav><!-- .site-navigation -->

Answer 1

您不能直接使用节点js（表示js）呈现html页面。使用express.static。我已经从website

中了解了如何使用express js渲染html页面。

希望这可以为您提供帮助

Answer 2

尝试将标题设置为html

app.get("/", function(req, res) {
    res.type('html');
    res.sendFile(path.join(__dirname, "index.html"));
});

如果这不起作用，请try：

app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/files'));
app.use(express.static(__dirname + '/uploads'));

使用express.js时HTML页面无法正确呈现

2 个答案: