为什么静态图像和 javascript 在 express.js 中不起作用？

Question

好的，所以我使用 express 在 Node.JS 上创建了一个网络服务器。 第一步一切正常，但是当我添加静态文件夹时，我的 javascript 停止工作并且图像没有显示。

我在控制台中得到的唯一错误是关于未定义来自其中一个 javascript 文件的onclick 函数。

我的文件结构：

我使用以下代码向服务器添加了静态文件：

app.use("/static", express.static("public"))

还尝试使用express.static(__dirname + "public")和express.static(path.join(__dirname, "public"))

这是来自 HTML 文件的 javascript/images/css 代码的一部分：

<script type="text/javascript" href="/js/script.js"></script>

<link type="text/css" rel="stylesheet" href="/css/main.css">

<img src="/img/logo.svg" alt=" ">

我还尝试在特定文件目录（例如“css”、“img”或“js”）之前添加/static ，但没有任何效果。

我能做些什么或尝试做些什么让它发挥作用？

编辑： index.js文件：

const express = require("express")
const path = require("path")
const vhost = require("vhost")

const app = express()

const port = process.env.PORT || 8080

app.use(express.static(path.join(__dirname, "public")))

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

app.get("/", function(req, res, next) {

    res.render("home")

})

app.listen(port, function() {

    console.log(`Listening on port ${port}`)

})

Answer 1

const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')))

<script type="text/javascript" href="./static/js/script.js"></script>

<link type="text/css" rel="stylesheet" href="./static/css/main.css">

<img src="./static/img/logo.svg" alt=" ">

或者，如果您想保留原始 HTML，

const path = require('path')
app.use(express.static(path.join(__dirname, 'public')))

<script type="text/javascript" href="./js/script.js"></script>

<link type="text/css" rel="stylesheet" href="./css/main.css">

<img src="./img/logo.svg" alt=" ">