EJS和Express，不知道如何从根路径加载静态文件
EJS (Embedded JavaScript) 是一种简洁、灵活的模板引擎，可用于在服务器端生成动态的 HTML 页面。它允许开发人员在 HTML 页面中嵌入 JavaScript 代码，从而动态地生成内容并将其发送到客户端。
Express 是一个流行的 Node.js 后端框架，它提供了一组简化的工具和中间件，帮助开发人员构建 Web 应用程序。Express 具有强大的路由功能和模板引擎支持，其中包括 EJS。
要从根路径加载静态文件（例如 CSS、JavaScript 文件、图像等），可以使用 Express 的内置中间件函数 express.static。下面是一个简单的示例：
首先，确保已经安装了 Express 框架和 EJS 模板引擎。可以使用以下命令进行安装：
npm install express ejs然后，创建一个名为 app.js 的文件，并在其中编写以下代码：
const express = require('express');
const app = express();
// 设置 EJS 模板引擎
app.set('view engine', 'ejs');
// 从根路径加载静态文件
app.use(express.static('public'));
// 定义根路径的路由处理程序
app.get('/', (req, res) => {
res.render('index');
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的代码中，public 目录是存放静态文件的文件夹。将你的静态文件（例如 CSS 文件）放置在该目录下。
接下来，创建一个名为 index.ejs 的文件，并将其放置在 views 目录下（如果没有该目录，则自行创建）。在该文件中，可以使用 EJS 的语法来嵌入动态内容。例如：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is a static HTML page generated by EJS and served by Express.</p>
<script src="script.js"></script>
</body>
</html>在上面的示例中，我们使用了 styles.css 和 script.js 这两个静态文件，并使用相对路径进行引用。
最后，在命令行中运行以下命令以启动服务器：
node app.js现在，当访问根路径 http://localhost:3000 时，Express 将会加载静态文件并将生成的 HTML 页面发送给客户端。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
相关·内容
js file with a console log in it 我从server/index.ts启动了一个Express服务器，用于查找pages目录中的文件。import * as express from "express";
.set("view engine", "ejs")
.get(在上面的例子中，我返回了index.<
浏览 19提问于2020-10-04得票数 0
我有一个NodeJS应用程序来呈现index.html，但是我无法让index.html在它所在的文件夹中找到图像。以下是index.js的内容var http = require('http').Server(app);<img src="img/myimage.png">myApp - folder
index
浏览 4提问于2016-05-27得票数 2
回答已采纳
1回答
图1:设置公用文件夹的express.static图3:结果结果与第三张图片相同。这是否意味着在我建立了在app.js中，静态文件的根路径将是/public。因此
绝对路径 /
浏览 2提问于2016-08-12得票数 0
我正在使用Nodejs和Express来创建一个动态网页。我有一个home.ejs文件，其中包含以下iframe：我的文件夹目录是：
News_Aggregator (includes
浏览 0提问于2018-08-14得票数 0
6回答
因此，我已经使用npm -bootstrap@3安装了引导程序，但是当我试图在我的应用程序中包含来自node_modules的bootstrap.min.css文件时，它在我的控制台中显示了这个错误：下面是我的项目结构上的一些图片：
包含引导文件的ejs代码这里有什么问题？
浏览 9提问于2017-11-26得票数 2
回答已采纳
我正在开发一个使用Express、JS和EJS视图引擎的web应用程序，它将部署在AWS放大器上。所有东西在本地主机上都能正常工作，但是当我将静态文件(css，js)部署到扩容上时，它会有问题。这一问题的详细情况如下：
在放大上，网站的根路径(/index)运行良好，静态文件被加载。但是当我转到另一条路径(例如/register)时，它不能加载</em
浏览 3提问于2020-11-25得票数 4
1回答
代码const path = require('path');
app.use(express.static(&
浏览 2提问于2020-03-20得票数 0
我一直在努力学习如何使用nodejs和express、ejs、socket.io制作一个简单的聊天应用程序simplechatApp文件夹结构
app.js现在问题是在第二张图...in中，index.ejs文件。在这里，当我将它与位于另一个文件夹(即公用文件夹)中的外部css文件(style.css)链接时，.....How可以编写href=style.
浏览 1提问于2018-12-21得票数 1
在尝试将静态图像添加到home.ejs文件夹时，我经常收到以下错误：-我试图使用app.use(express.static('public'))这是我使用的路径：我不知道如何解决这个问题，文件结构是否有问题，或者我在引用文件名时出错了。
浏览 2提问于2021-04-29得票数 0
1回答
节点快速服务器不提供图像文件夹
、、、、
当我在生产服务器上运行捆绑的React应用程序时，它找不到我的图像文件，我也不知道为什么。我确信这与我的节点快速配置和/或我的.ejs模板文件有关。server.jsvar app = express();
app.use'view engine', &#
浏览 6提问于2017-01-07得票数 1
1回答
如何将css文件与ejs链接？
、、、、
在我的目录中，我创建了一个公用文件夹，其中放置了另一个名为css的文件夹，该文件夹位于styles.css。在我目录中的另一个名为视图的文件夹中，我放置了我的ejs文件，我想用它链接styles.css：<link rel="stylesheet" type="css/text" href="css/styles.css
浏览 5提问于2020-05-14得票数 1
回答已采纳
2回答
我相信这是将css链接到ejs文件的正确方法，但是它仍然不起作用。您可以看到我的所有文件夹是如何安排在提供的图片。
浏览 8提问于2022-02-16得票数 1
我正在开发一个使用NodeJS / Express和EJS作为模板引擎的web应用程序。另一条路线是：/:app/:action其中:app定义文件夹，例如文件夹任务，动作定义操作，例如创建。使用URL /mission/create将模板/mission/create.ejs包含在default.ejs中并显示出来。
它正在工作，但我对加载cs
浏览 4提问于2016-02-09得票数 4
回答已采纳
我正在尝试将CSS应用到这个EJS文件中，但是无论我应用什么样的样式，我都不会应用任何东西。下面是代码示例：<%- include("partials/header.ejs", {title: ` - Items`, body_id: `items`} )%>
<%CSS是从header.ejs文件加载的，我可以确认它在除这个文件之外的所有其他EJS<
浏览 7提问于2022-02-27得票数 0
回答已采纳
1回答
我的express应用程序使用一个路径("/")来显示一个巨大的页面，该页面是使用多个包含项构建的。为了避免混淆，我想单独测试每个ejs文件。但由于这些ejs-include无法从express应用程序中访问，因此我不知道如何执行该任务。- index.ejs - systemsTable.ejs
浏览 1提问于2020-06-30得票数 1
2回答
我对路线或静态文件有问题。我添加了对静态文件的引用：并设定路线：app.usefunction(req, res) {});
所以我的问题是:当
浏览 0提问于2014-10-13得票数 1
回答已采纳
我正在尝试第一个快速网络应用程序，我正在使用ejs模板来呈现我的网页和css样式我的网页。但服务器无法呈现公用文件夹中的css文件。我将静态文件路径放在express .js中，如下所示 var app = express();
我尝试将静态文件路径</
浏览 2提问于2016-08-26得票数 0
我正在学习如何使用NodeJS和Express，而且我在使用express加载页面时遇到了困难。我能够加载静态页面(index.html工作很好)，但是在任何动态方面都有问题；在这种情况下，我一直收到错误“无法获得/store.html”。有人能解释一下发生了什么吗？server.jsapp.use(express.stat
浏览 0提问于2020-02-16得票数 0
2回答
我有一个文件夹看起来像|代码是const变量= file2 (“./file2/file1.ejs)--假设我不想相对地要求模型，为什么const变量=file2(”/file2/file1.ejs“)不能工作。
"/“是否意味着从根目录开始？如果我们在另一个文件夹中有大量的文件夹，
浏览 4提问于2020-01-23得票数 1
回答已采纳
2回答
Nodejs Json解析
、、、、
我正在尝试使用jqgrid的节点js加载json数据。我也在使用jqgrid和Express Js。当我运行node js时，它没有加载json文件。有没有人能帮我解决问题。以下是node js代码片段：var app = express();
app.g
浏览 1提问于2015-04-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
