我有一个快速后端服务器。当它启动时,它必须渲染带有
index.js
的 EJS 页面。
但是,我收到了 3 个错误:
根目录包含:
'style.css'
文件
- index.js
文件footer.ejs
文件
- header.ejs
文件
- create.ejs
文件
- home.ejs
文件
- view.ejs
文件里面
footer.ejs
我有以下几行:<script src="public/index.js"></script>
在 header.ejs
里面我有以下一行:<link rel="stylesheet" href="public/styles/style.css">
在index.js
里面我有以下几行:
import express from "express";
import path from "path";
import bodyParser from "body-parser";
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
const __dirname = dirname(fileURLToPath(import.meta.url)); // Define __dirname using import.meta.url
const app = express();
const port = 3000;
// Set the 'views' directory for Express to find the EJS templates
app.set('views', join(__dirname, '..', 'views'));
// Configure Express to use EJS as the template engine
app.set('view engine', 'ejs');
// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, "public")));
// Parse URL-encoded bodies (as sent by HTML forms)
app.use(bodyParser.urlencoded({ extended: true }));
此外,我还遇到一个 Bootstrap 汉堡菜单问题,当它处于小版本时,该菜单无法工作。 这是导航栏
header.ejs
中的代码:
<nav class="navbar fixed-top navbar-expand-md bg-body-tertiary border-bottom" data-bs-theme="dark" >
<div class="container-fluid">
<a class="navbar-brand">Luk's Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="/">Home</a>
<a class="nav-link" href="/create">Write Blog</a>
</div>
</div>
</div>
</nav>
需要在JS中定义它才能工作吗?
我检查了文件的路径、拼写,我什至使用chatgpt来搜索问题,但我们兜圈子却没有结果。 另外,请注意,如果我在本地运行服务器,index.js 中定义的函数正在工作(即使我收到上面显示的错误),唯一的问题是 CSS 文件(未加载)
您需要从 EJS 模板中资源的
public
属性中省略 src
,因为:
Express会查找相对于静态目录的文件,因此 静态目录的名称不是 URL 的一部分。
所以改变
<script src="public/index.js"></script>
到
<script src="index.js"></script>
等等
您可以定义任何安装路径,因此如果您添加
public
作为路径即可工作:
app.use('/public', express.static(path.join(__dirname, "public")));
现在它会加载:
<script src="public/index.js"></script>
至于 Bootstrap 导航栏,请确保加载 Bootstrap 资源(仅在 index.ejs 上加载一次,而不是在部分中),它通过
data-bs-toggle
属性自动运行:
并确保您的自定义样式不会以某种方式发生冲突。