Javascript CSS文件路径不为'；不能同时在本地主机和文本编辑器中工作

所以，我正在使用Node.JS和Express编写用JS编写的URL缩写器。我刚刚完成前端，但我有一个让css工作的问题。 我的项目树如下所示：

public
  css
    main.css
views
  index.html
app.js

在index.html文件中，我以这种方式链接了.css文件

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

我想这与我在app.js中声明的静态路径有关

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

因为当我将index.html中的路径更改为

/css/main.css

时，所有内容都在localhost上工作，但是我的本地文本编辑器（括号）无法看到该css文件。

---

在文本编辑器和本地主机的开发过程中，我应该怎么做才能使其正常工作？

有几种方法（可能更多）：

选项1

使用浏览器调试应用程序（仅使用应用程序查看修改，而不使用括号编辑器）

选项2

将您的

href=“”

属性设置为静态位置，例如

href=“localhost:8080/css/main.css”

。然后（可能）当您同时运行编辑器和应用程序时，您将在两侧获得相同的CSS文件

选项3

添加另一行样式表以加载它们

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

---

解决此问题最常用的方法通常是选项1，因此您不必担心bracket的内部浏览器，只需找出与模块的组合，即可复制从编辑器获得的额外内容。

有两种方法（可能更多）：

选项1

使用浏览器调试应用程序（仅使用应用程序查看修改，而不使用括号编辑器）

选项2

将您的

href=“”

属性设置为静态位置，例如

href=“localhost:8080/css/main.css”

。然后（可能）当您同时运行编辑器和应用程序时，您将在两侧获得相同的CSS文件

选项3

添加另一行样式表以加载它们

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

---

解决此问题最常用的方法通常是选项1，因此您可以不必担心bracket的内部浏览器，而是找到一个与模块的组合，该组合将复制从编辑器中获取的额外内容。

浏览器发送get请求以获取CSS文件，您可以在代码中添加以下代码段：

var fs = require('fs');
var url = require('url');
var query = url.parse(req.url, true)
var pathname = query.pathname
var filepath = "./public/"

if(fs.existsSync(filepath+pathname)){
    res.end(fs.readFileSync(filepath+pathname));
}

现在在html页面中：

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

解释：

浏览器将发送GET请求

css/main.css

然后，

pathname

将是

css/main.css

文件路径

声明为

/public/

filepath+pathname

将是

/public/css/main.css

fs.existsSync

将返回

true

并写入数据作为响应

因为您的

文件路径

是

/public/

只有公共目录下的文件才能用这种方法发送，所以您的*app.js/文件是安全的

我已经用synchronus的方式写了这篇文章，使用的是Sync函数，你也可以用异步的方式写

---

希望这有助于

浏览器发送获取CSS文件的get请求，您可以在代码中添加以下代码段：

var fs = require('fs');
var url = require('url');
var query = url.parse(req.url, true)
var pathname = query.pathname
var filepath = "./public/"

if(fs.existsSync(filepath+pathname)){
    res.end(fs.readFileSync(filepath+pathname));
}

现在在html页面中：

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

解释：

浏览器将发送GET请求

css/main.css

然后，

pathname

将是

css/main.css

文件路径

声明为

/public/

filepath+pathname

将是

/public/css/main.css

fs.existsSync

将返回

true

并写入数据作为响应

因为您的

文件路径

是

/public/

只有公共目录下的文件才能用这种方法发送，所以您的*app.js/文件是安全的

我已经用synchronus的方式写了这篇文章，使用的是Sync函数，你也可以用异步的方式写

---

希望这有帮助

选项1-是最简单的一个，但不幸的是，方括号绝对是市场上最好的实时预览，我不会放弃这一点。选项2-不起作用，本地主机服务器仍在搜索

/public

中的

main.css

，就像静态路径告诉它的那样。选项3——好吧，它确实有效。谢谢你的帮助：）选项1-是最简单的一个，但不幸的是括号绝对是市场上最好的实时预览，我不会放弃这个。选项2-不起作用，本地主机服务器仍在搜索

/public

中的

main.css

，就像静态路径告诉它的那样。选项3——好吧，它确实有效。谢谢你的帮助：）