CSS 文件路径在 localhost 和文本编辑器中都不起作用答案

【问题标题】：CSS file path doesn't work both on localhost and in text editorCSS 文件路径在 localhost 和文本编辑器中都不起作用
【发布时间】：2017-08-21 19:06:24
【问题描述】：

所以，我正在使用 Node.js 和 Express 用 JS 编写 URL Shortener。我刚刚完成了前端，但我在让 css 工作时遇到了问题。我的项目树如下所示：

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

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

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

在括号编辑器中创建站点时它确实可以工作，但是当我启动 localhost 服务器 CSS 没有并且我得到 p>

Cannot GET /public/css/main.css

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

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

因为当我将 index.html 中的路径更改为 /css/main.css 时，一切都在 localhost 上运行，但是我的本地文本编辑器（括号）看不到该 css 文件。在文本编辑器和本地主机上的开发过程中，我应该怎么做才能使它工作？

【问题讨论】：

标签： javascript html css node.js express

【解决方案1】：

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

选项 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，所以你可以不用担心括号的内部浏览器，而想出一个与live-reload模块的组合，它将复制您从编辑器那里获得的额外内容。

【讨论】：

选项 1 - 是最简单的选项，但不幸的是，Brackets 拥有市场上最好的实时预览，我绝不会放弃。选项 2 - 不起作用，localhost 服务器仍在 /public 中搜索 main.css，就像静态路径告诉它的那样。选项 3 - 好吧，它确实有效。感谢您的帮助：）

【解决方案2】：

浏览器发送一个get请求来获取一个CSS文件，你可以在你的代码中添加如下代码sn-p：

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 filepath 被声明为./public/

filepath + pathname 将是 ./public/css/main.css

fs.existsSync 将返回true 并在response 中写入数据。

因为你 filepath 是 ./public/ 只有 public 目录下的文件可以用这种方法发送，所以你的 *app.js/ 文件是安全的。

我已经使用 Sync 函数以 synchronus 的方式编写了这个，您也可以使用 asynchrus 的方式来完成。

希望这会有所帮助

【讨论】：