带有 css 和 js 的 Express 服务器静态 ejs 文件不起作用答案

【问题标题】：Express server static ejs file with css and js does not work带有 css 和 js 的 Express 服务器静态 ejs 文件不起作用
【发布时间】：2022-02-18 18:45:04
【问题描述】：

我正在尝试使用 node js 创建一个网站，我有 /home 和 /contact。一切正常，直到我将 css 和 js 都放在它们上并且第二次调用不起作用。我认为我首先访问 /home （一切正常），然后我执行 /contact 并且页面保持不变。

const PORT = 7777;

app.set('view engine','ejs');

app.get('/home',(req,res)=> {
    console.log("get /home");
    app.use(require("express").static('./views/Home'));
    res.render('Home/home.ejs');
});

app.get('/contact',(req,res)=>{
    console.log("get /contact");
    app.use(require("express").static('./views/Contact'));
    res.render('Contact/contatct.ejs');
});

app.listen(
    PORT,
    () => console.log(`it's alive on http://localhost:${PORT}`)
)

提前谢谢

【问题讨论】：

标签： html node.js express ejs static-files

【解决方案1】：

不多次要求express。不要在模块顶部需要express一次
不要不添加中间件来响应对特定页面的请求。请在应用程序加载时添加它。
不要不要将视图模板与静态文件混合

app.set('view engine','ejs');

app.get('/home',(req,res)=> {
    console.log("get /home");
    res.render('Home/home.ejs');
});

app.get('/contact',(req,res)=>{
    console.log("get /contact");
    res.render('Contact/contatct.ejs');
});

app.use("/static", express.static('./static/'));

然后在你的 EJS 模板中：

<link rel="stylesheet" href="/static/file_name_in_static_folder.css">

或者

<img src="/static/image_used_in_one_template_but_stored_in_static_folder.png">

【讨论】：

如果我有多个文件夹并且我想访问的不仅仅是 Views 文件夹？
您可以使用不同的路径多次调用app.use("/static", express.static('./static/'));。只是不要在端点函数的中间这样做。

【解决方案2】：

检查 'views/Contact/' 中的文件名是 'contatct' 还是 'contact'

const PORT = 7777;

app.set('view engine','ejs');

app.get('/home',(req,res)=> {
    console.log("get /home");
    app.use(require("express").static('./views/Home'));
    res.render('Home/home.ejs');
});

app.get('/contact',(req,res)=>{
    console.log("get /contact");
    app.use(require("express").static('./views/Contact'));
    // here
    res.render('Contact/contatct.ejs');
});

app.listen(
    PORT,
    () => console.log(`it's alive on http://localhost:${PORT}`)
)

如果没有错别字试试这个

const PORT = 7777;

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

app.get("/home", (req, res) => {
  console.log("get /home");
  res.render("Home/home.ejs");
});

app.get("/contact", (req, res) => {
  console.log("get /contact");
  res.render("Contact/contact.ejs");
});

app.listen(PORT, () => console.log(`it's alive on http://localhost:${PORT}`));

【讨论】：

编辑时出错了。
请不要回答解决方案是“修复错字”的问题。这种类型的问题没有长期价值，因为其他有相同问题的人不会通过搜索找到这个问题。 “错字”是标准的关闭投票原因之一。回答此类问题可能会阻止 OP 删除它以从 StackOverflow 中删除臃肿。您可以删除此答案以消除阻止此类清理的可能性。