Express.js静态路径问题| CSS 未在一个页面上应用而 HBS 未在另一页面上加载
Express.js StaticPath problem | CSS not being applied on one Page while HBS not getting loaded on other Page
我正在使用 Express.js 并且设置了静态路径。
我正在尝试做的事情：
- 提供 2
.hbs 个文件 --> (index.hbs & about.hbs)
- 在两者中加载部分 (header)
- 应用一点CSS文件
发生了什么：
- CSS 在
index.hbs 上加载，而部分未加载。
- CSS 未在
about.hbs 上加载部分内容。
- 在
about.hbs 控制台 window 上收到此错误：Refused to apply style from 'http://localhost:3000/public/css/homePageStyles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
设置静态路径：
const staticPath = path.join(__dirname, "../public")
app.use(express.static(staticPath))
文件夹结构：
完整源代码Link:
https://github.com/jeeemmyy/7.-Partials
您的问题与您如何使用 Express.
注册静态资产路径有关
您的注册如下所示：
const staticPath = path.join(__dirname, "../public")
app.use(express.static(staticPath))
这告诉 Express 在服务器上的“../public”文件夹中查找静态文件，其路径 相对于 ../public 文件夹 与请求匹配。
例如，对“localhost:3000/css/homePageStyle.css”的请求将匹配服务器上位于“../public/css/homePageStyle.css”.
但请注意，“public”不包含在 HTTP 请求路径中，因为它是 root 文件夹which Express 查找静态文件。
要修复模板中的 CSS 引用，您需要执行以下任一操作：
从模板中的样式 link href 中删除“public”：<link rel="stylesheet" href="../../public/css/homePageStyles.css"> 变为 <link rel="stylesheet" href="/css/homePageStyles.css">.
在使用 Express 注册静态资源路径时指定“/public”作为虚拟路径前缀：app.use("/public", express.static(staticPath)).
接下来，您的主页不包含 header 部分内容的原因是因为您的 index.hbs 文件甚至没有得到处理！您的“public”文件夹中有一个“index.html”文件。当您的 HTTP 请求指向 localhost:3000/ 时，Express 会在服务器的 public 文件夹中查找并找到与 index.html 的匹配项，因此 returns 甚至不执行“的 GET 处理程序” /”。您需要删除该“index.html”文件，因为您不打算提供它。
我正在使用 Express.js 并且设置了静态路径。
我正在尝试做的事情：
- 提供 2
.hbs个文件 --> (index.hbs&about.hbs) - 在两者中加载部分 (header)
- 应用一点CSS文件
发生了什么：
- CSS 在
index.hbs上加载，而部分未加载。 - CSS 未在
about.hbs上加载部分内容。 - 在
about.hbs控制台 window 上收到此错误：Refused to apply style from 'http://localhost:3000/public/css/homePageStyles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
设置静态路径：
const staticPath = path.join(__dirname, "../public")
app.use(express.static(staticPath))
文件夹结构：
完整源代码Link: https://github.com/jeeemmyy/7.-Partials
您的问题与您如何使用 Express.
注册静态资产路径有关您的注册如下所示：
const staticPath = path.join(__dirname, "../public")
app.use(express.static(staticPath))
这告诉 Express 在服务器上的“../public”文件夹中查找静态文件，其路径 相对于 ../public 文件夹 与请求匹配。
例如，对“localhost:3000/css/homePageStyle.css”的请求将匹配服务器上位于“../public/css/homePageStyle.css”.
但请注意，“public”不包含在 HTTP 请求路径中，因为它是 root 文件夹which Express 查找静态文件。
要修复模板中的 CSS 引用，您需要执行以下任一操作：
从模板中的样式 link href 中删除“public”：
<link rel="stylesheet" href="../../public/css/homePageStyles.css">变为<link rel="stylesheet" href="/css/homePageStyles.css">.在使用 Express 注册静态资源路径时指定“/public”作为虚拟路径前缀：
app.use("/public", express.static(staticPath)).
接下来，您的主页不包含 header 部分内容的原因是因为您的 index.hbs 文件甚至没有得到处理！您的“public”文件夹中有一个“index.html”文件。当您的 HTTP 请求指向 localhost:3000/ 时，Express 会在服务器的 public 文件夹中查找并找到与 index.html 的匹配项，因此 returns 甚至不执行“的 GET 处理程序” /”。您需要删除该“index.html”文件，因为您不打算提供它。