样式表链接中的 href 属性在节点中不起作用答案

【问题标题】：href attribute in stylesheet link does not work in node样式表链接中的 href 属性在节点中不起作用
【发布时间】：2019-03-28 17:04:34
【问题描述】：

我尝试运行我的网站 2 方法。 1) 通过使用节点
2）不使用节点（只是我的电脑上的index.html）但是，就链接样式表而言，结果是不同的。没有节点，样式标签中的样式表可以像往常一样链接。但是，当使用节点作为服务器时，样式表无法链接。

这是我的代码结构。

/app
  /server.js
  /views
    /statics
        /index.html
    /partials
  /public
    /javascript
    /css
        /main.css
    /images

这里是 index.html 头标签

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

server.js

const express = require('express')
const app = express()
const path = require('path')
// no need to use app.use(app.router) because of that update
// function signature express.static(root, [options])

app.use(express.static('public'));

// mount root to views/statics
app.use('/', express.static('views/statics'));

const PORT = process.env.PORT || 3000;

app.listen(PORT,() => {
    console.log(`Server is listening on port ${PORT}`)
  });

【问题讨论】：

标签： html node.js express

【解决方案1】：

您似乎没有提供您的资产应该在哪个路径下可用

app.use(express.static('public'));

根据the docs，在这种情况下，公共文件夹中的子文件夹将从根路径获取。

一般来说，您应该避免通过相对路径提供资源。在您的情况下，href="/css/main.css" 应该可以工作。 Node 充当服务器，您可以在server.js 中定义提供给定资源的路径。您无法在文件系统的目录结构路径下访问它们

【讨论】：

非常感谢。您提到避免使用相对路径，那么在这种情况下绝对路径是什么？通过使用 __dirname?
当您必须重组项目时使用 __dirname 会有所帮助，但我提到的是使用 href="../../some/path。它可以工作，但如果您使用相对路径，例如当项目变得更大时，您将很难重构您的网站结构。
那么在这种情况下，绝对路径是什么？通常绝对路径类似于example.com no?

【解决方案2】：

通过将 Public 目录声明为资产目录来使其可访问。在您的服务器中，添加以下代码：

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

那么静态文件可以这样访问：

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

【讨论】：