如何在本地主机上加载 css 和引导文件 [重复]答案

【问题标题】：How to load css and bootstrap files on localhost [duplicate]如何在本地主机上加载 css 和引导文件 [重复]
【发布时间】：2016-08-08 13:58:00
【问题描述】：

我对 HTML/JS 有点陌生，我正在尝试为一个 uni 项目制作一个网络应用程序。我使用 express 来设置我的服务器并加载一个 HTML 页面。 HTML 文件加载其他文件（图像、css）以正确显示自身。当然，由于这些文件不在本地主机服务器上，而是在我的项目文件夹中的计算机上，因此无法找到它们来显示它们。

http://localhost:8080/bootstrap.css Failed to load resource: the server responded with a status of 404 (Not Found)

我需要以某种方式上传它们吗？如果是，我将如何在 JS 中做到这一点？

编辑更多信息：这是我的项目的外观： https://gyazo.com/ef316cf306e53f4b7caec39c4e103e66

在 vue 内部（法语视图）我有这个： https://gyazo.com/f3ba3ece416a8ea7dda705c3b1366a3a

我通过节点运行 app.js 以启动应用程序并使用以下代码加载我的 html：

app = new express();
var path    = require("path");


app.get('/',function(req,res){
      res.sendFile(path.join(__dirname+'/vue/accueil.html'));
});

在 accueil 文件中：

<!DOCTYPE html>
 <meta charset="utf-8">
    <link href="bootstrap.css" rel="stylesheet">
    <style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
    </style>
  <title>ACCUEIL</title>
</head>
<body> etc...

和

<div class="row">
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/concert.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/u2.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/arianagrande.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/adele.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/imaginedragons.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/thecure.jpg" alt="Tigre"></div>

        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/coldplay.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/onerepublic.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/calvin.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/alicia.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/wham.jpg" alt="Tigre"></div>
    </div>

我是否需要为每个图像和 css 文件制作一个 app.get？

【问题讨论】：

上传它们？为什么不像其他远程文件那样引用它们。或者更好的是，将它们放在根文件夹中的某个位置...
您应该以某种方式将它们提供给浏览器。您可以使用 express 方式进行操作。文档在这里：expressjs.com/en/starter/static-files.html

标签： javascript html css localhost

【解决方案1】：

如果您的文件不在 localhost 文件夹中，那么您“不能”在代码中加载它们。（可以，但不应该）

您需要在 localhost 文件夹中包含所有内容，例如，如果您的 html 位于名为“myfirstwebsite”的文件夹中，则您需要将所有文件都包含在该文件夹中。

例如：

 myfirstwebsite
 |-index.html
 |-CSS
 |--bootstrap.css
 |-IMG
 |--welcome.jpg
 |-JS
 |--script.js

然后在您的 HTML 中加载所有需要显示的文件，例如您的脚本：

<script type="text/javascript" src="js/script.js"></script>

并且“script.js”将被加载。与引导程序相同，如果您在“myfirstwebsite”文件夹中的css文件夹中有引导程序，那么您可以使用以下方式调用它：

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

您现在应该可以加载它们了。

切勿将文件加载到服务器文件夹之外，例如“file://c:/documents/bootstrap.css”，因为如果您需要将站点移动/上传到 PC 之外的其他位置，那么您将有很多问题。

【讨论】：

这似乎是我所做的，但没有工作。用更多关于我在做什么的信息来编辑主要问题（昨天当我问这个问题时已经很晚了）。感谢所有的帮助！
问题中的代码显示，如果你向服务器请求/js/script.js，它不会做任何事情。它没有设置为提供这些文件。移动文件无济于事，您必须首先教 JavaScript 响应对它们的请求。