为什么 css 只加载到本地服务器而不加载实际网站？答案

【问题标题】：Why does css only load on a local server and not the actual website?为什么 css 只加载到本地服务器而不加载实际网站？
【发布时间】：2021-07-17 13:09:53
【问题描述】：

我在尝试加载我的 css 文件时遇到了很多麻烦。每次我托管本地服务器并访问我的网站时，它都可以正常工作。但是，当我使用 cpanel 上传我的网站并尝试访问该网站时，html 会加载，但 css 不会。此外，当我检查页面并转到源时，css 文件为空白，并且出现错误“加载资源失败：'styles.css' 服务器响应状态为 404 ()”。我很困惑，请帮忙

下面是我的css '''''''''''''''''''''''''''''''''''''''''''

<link rel="stylesheet" href="css/styles.css">

'''''''''''''''''''''''''''''''''''''''''''

下面是我使用 node.js 的 app.js // 请记住我有一个包含 css 文件夹的公共文件 ''''''''''''''''''''''''''''''''''''''''''''' '''''

const express = require('express')
const bodyParser = require('body-parser')
const path = require('path')
// var request = require('superagent')

const app = express()
app.use(express.static('public'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.use('/public', express.static('css/styles.css'))
app.get('/', function (req, res) {
  res.sendFile('/index.html', { root: __dirname })
})

app.listen(3000, function () {
  console.log('Server is running on port 3000')
})

''''''''''''''''''''''''''''''''''''''''''' ''''''''''''''''

【问题讨论】：

你如何上传你的网站，一个 zip 文件？ CSS 文件是否存在于服务器上的预期文件夹中？
我想应该是 app.use(__dirname + '/public', express.static('css/styles.css'))，让我知道这是否有效。
您是否正在使用 webpack 之类的工具来捆绑和缩小您的客户端网站内容？
@Zachary Mitchell 你能在这里分享你的网址吗？
@MauricioGraciaGutierrez 我可以在 cpanel 上找到我的 css 文件，但是当我检查我的页面并转到源文件 css 文件没有内容时

标签： html css node.js

【解决方案1】：

所以您使用的是 cpanel，因此无法直接访问您的 css 文件夹

所以转到您的 cpanel 顶部，styles.css 的完整路径复制该路径并添加到
@

<link rel="stylesheet" href="css/styles.css">

替换为

<link rel="stylesheet" href="/yourfolder-path/css/styles.css">

解决方案 2 在公共 html 中获取父目录，但它仅适用于 webs 服务器配置


<link rel="stylesheet" href="../css/styles.css">

【讨论】：

【解决方案2】：

当您的 nodejs 服务器尝试提供在您的 HTML 页面中引用的静态文件时，它会查找与您的 app.js 文件相关的静态文件。

如果您在将内容放入 cpanel 之前捆绑并缩小内容，则您用于在开发环境中提供静态文件的公用文件夹不再存在于您的 cpanel 环境中，或者可能存在但通过不同的文件夹路径。

有两种方法可以解决这个问题。将您的开发环境指向您的捆绑和缩小文件夹位置。这意味着改变

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

到

app.use(express.static('build'))

这样做的一大缺点是每次您想查看任何更新时都需要捆绑和缩小客户端应用程序。

另一种更好的方法是检查 app.js 中的环境并相应地设置静态文件夹位置，下面是一个示例：

const app = express()
if(process.env.NODE_ENV === 'production') {
    app.use(express.static('build'))
} 
else {
    app.use(express.static('public'))
}
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

【讨论】：