无法在 nodemon 的 HTML 中找到嵌入式脚本

Question

我是新手，正在尝试 JS。我试图构建一个小型 Node.js 应用程序，在 index.html 中嵌入了一个 JS 脚本，但是当我运行 nodemon 时，它 returns 404 用于脚本并且找不到它。带有嵌入式脚本的相同 html 页面可以很好地处理 parcel。我做错了什么？

我的 app.js :

const express = require('express')
app = express()

app.get('/', (req, res, next)=>{
    
    res.sendFile('D:/Node.js Folder/My first project/views/index.html')
    
})

app.get('/add-user', (req, res, next)=>{
    
    res.sendFile('D:/Node.js Folder/My first project/views/add-user.html')
    
})

app.get('/show-user', (req, res, next)=>{
    
    res.sendFile('D:/Node.js Folder/My first project/views/show-users.html')
    
})

app.listen(3000)

HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body class = "text-gray-400">
    
    <div>
        <div class = "text-3xl">
            <nav>
                <h1>
                    Hello! Welcome to the first page!
                </h1>
                <h1 class = "chat-notification-title">
                    Hello! Welcome to the first page!
                </h1>
                <form>
                    <label for="cname">Company Name</label><br>
                    <input type="text" id="cname" name="cname"><br>
                    <label for="ccode">Company Code</label><br>
                    <input type="text" id="ccode" name="ccode">
                  </form> 
                  <button class ='btn-submit' type = "submit">Add Record</button>
            </nav>
        </div>
    </div><script src="../controller/controller-1.js"></script>
</body>
</html>

嵌入式脚本：

'use strict'


console.log(document)
const button = document.querySelector('.btn-submit')
console.log(button)
button.addEventListener('click', function () {
    
    console.log('BUTTON PRESSED')
    alert("Pressed")
})

Answer 1

Nodemon 应该在服务器端使用，通常运行用于 express 或类似服务器。 parcel serve 是你应该在客户端（没有服务器）使用的，直接为 html 文件提供服务。

您也不应该使用自己磁盘的路径。幸运的是，当项目运行ning 时，它会创建一个包含相同文件的 dist 文件夹。你应该 link 那些到代码中的路径。即在 res.sendFile 你应该写 res.sendFile(path.resolve("../client/dist/index.html")) 或 res.sendFile(path.resolve("../dist/views/index.html))

您将路径导入为 import * as path from "path"

如果你想在服务器上使用它，那么你应该这样做：

客户端 json“dev”应该 parcel watch index.html，服务器“dev”应该 nodemon server.js。这两个脚本都应该在运行根 package.json 文件中，同时允许它们运行同时

"dev": "concurrently npm:server:dev npm:client:dev",
"server:dev": "cd server && npm run dev",
"client:dev": "cd client && npm run dev",

在服务器文件中，您应该执行如下操作：

import express from "express"; //import express
const app = express(); // use express
app.use(express.static("../client/dist/")); // allows express to server static files

app.use((req, res, next) => {
  if (req.method === "GET" && !req.path.startsWith("/api")) {
    return res.sendFile(path.resolve("../client/dist/index.html"));
  } else {
    next();
  }
}); // checks if url is trying to reach an api, if not it returns the file you are looking for

const server = app.listen(process.env.PORT || 3000, () => {
  console.log("Server started on http://localhost:" + server.address().port);
}); // starts server and logs the localhost url

然后你打算从服务器端访问你的站点，每次你更改服务器时，nodemon 都会为你重新启动服务器，每次你更改客户端时，parcel 都会做同样的事情

Answer 2

您需要做的一件事是停止使用绝对路径

例如。 'D:/Node.js Folder/My first project/views/index.html'

应该是./views/index.html

假设 app.js 文件与视图文件夹位于同一文件夹中。

您可能部署此代码的服务器不会与您的电脑具有相同的路径。

您可能还想创建一个静态文件夹并将您的 html、脚本（控制器）文件夹移动到其中并将以下行添加到 app.js

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

// or

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

这样您就不必像现在这样处理单个文件。

如果您将嵌入文件的 src 设置为 ./controller/controller-1.js，它将正常工作。

Answer 3

我通过将此添加到我的 app.js 来解决它：

app.get('/controller/controller-1.js', (req, res, next)=>{

res.sendFile('D:/Node.js Folder/My first project/controller/controller-1.js')

})

来自此线程的帮助：How to include javascript on client side of node.js?

有更好的方法吗？

无法在 nodemon 的 HTML 中找到嵌入式脚本

Cant find embedded script in HTML in nodemon

javascript

node.js

nodemon