Рендеринг HTML файла с помощью res.sendFile () в Express. js - PullRequest
Новая
       60

Рендеринг HTML файла с помощью res.sendFile () в Express. js

1 голос
/ 14 июля 2020

Я пытаюсь визуализировать свой HTML файл с локальным CSS файлом, локальным JS файлом и двумя удаленными файлами в виде ссылок

, но все, что у меня есть, это простой HTML в браузере

вот верхняя часть моего HTML файла (index. html): 

<script src="src/drawflow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="src/index.css" />
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>

Это мой серверный код (app. js): 

"use strict";
const express = require("express");
const path = require("path");

const app = express();

app.use(express.static(__dirname + "/src"));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname + "/index.html"));
});

app.listen(process.env.port || 4000, () => {
  console.log("listening to port 4000...");
});

и вот моя файловая структура: файловая структура

Файл index. html работает нормально при открытии в браузере, но не может правильно загружаться с сервера.

Есть идеи?

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Благодаря комментарию Криса Шорта

Я заменил 

app.use(express.static(__dirname + "/src"));

на 

app.use('/src', express.static(path.join(__dirname + '/src')));

, и это сработало отлично.

Большое спасибо.

0 голосов
/ 14 июля 2020

Если я правильно понимаю. Ресурсы для вашего файла HTML не извлекаются должным образом, поэтому ваш HTML отображается как пустой при доступе через браузер. При таком понимании причина того, что ваши ресурсы не загружаются должным образом, связана с тем, как настроено ваше приложение. js.

В настоящее время вы пытаетесь получить доступ к href="src/index.css" в заголовке, однако все ваши активы будут найдены на вашем сайте root. Expressjs обрабатывает все операторы app.use как промежуточное ПО и по умолчанию прикрепляется к root вашего веб-сайта. Если вы хотите, чтобы это было доступно из «sr c», вам нужно будет настроить express .stati c немного иначе, как это. 

app.use("/src", express.static(path.join(__dirname, "/src"));

См. Ниже для подробнее

https://expressjs.com/en/starter/static-files.html

https://expressjs.com/en/guide/using-middleware.html

...