想在加载页面时使用节点在本地服务器上运行我的 html 页面,但 css 文件不起作用

Posted

技术标签:

【中文标题】想在加载页面时使用节点在本地服务器上运行我的 html 页面,但 css 文件不起作用【英文标题】:want to run my html page on local server using node when i am loading the page but the css file is not working 【发布时间】:2020-12-09 13:46:39 【问题描述】:

我的文件夹结构。

node_modules 公开 form.css 脚本 查看 server.js package.json webForm.html

下面是我的 server.js 文件

var express = require("express");
var path = require("path");
var app= express();

var port = 8080;

app.use("/" , function(req,res)
    res.sendFile(path.join(__dirname + "/webForm.html"));
);

app.use('/assets', express.static(__dirname + '/public'));

app.listen(port);

在 webForm.html 文件下面我引用了 css 文件

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Basic Details</title>
<link rel="stylesheet" href="/assets/form.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

请查看我在 package.json 文件中的错误


  "name": "ex-website",
  "version": "1.0.0",
  "scripts": 
    "start": "node server.js"
  ,
  "dependencies": 
    "express": "^4.17.1"
  ,
  "main": "server.js",
  "devDependencies": ,
  "author": "",
  "license": "ISC",
  "description": ""

【问题讨论】:

+ node_modules - public - form.css + script + view server.js package.json webForm.html 您能否提供一个文件夹结构的树形视图 我试图放置树视图,但它把它变成了列表。我该怎么做@Challe 您可以将其编辑到您的帖子中。而不是在评论中发布。 @Challe 我添加了文件夹结构的图片 【参考方案1】:

你试过“。”

href="./assets/form.css"

【讨论】:

我试过状态码在调试器的网络部分显示 304 Not modified 我看不出这会有什么不同。它会破坏任何不在站点根目录的 URL 的路径。 (目前还没有,但这只是不如当前方法灵活)。【参考方案2】:

这应该足够了。

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

【讨论】:

这使得路径相对于当前工作目录而不是模块所在的目录。它可能会破坏它。没用。 您从未解释过相对于当前工作目录的路径对您来说是个问题。你应该把这个期望放在问题中。 没有问这个问题,即使我问了,列出我已经解决的所有问题以防万一也没有意义决定提供一个没有解决当前问题的引入新问题的答案。

以上是关于想在加载页面时使用节点在本地服务器上运行我的 html 页面,但 css 文件不起作用的主要内容,如果未能解决你的问题,请参考以下文章

server.timeout 在本地完美运行,但在生产中无法在节点 js 中运行

如何仅在页面加载时禁用 DataTables 中的排序?

如何在 HTML 页面加载时使用 JFrames 打开 Applet

heroku 节点服务器不会运行

Javascript未在在线网站上加载,但在本地加载xampp

状态变化时如何防止 useQuery 运行?