6

我正在使用 ExpressJS。我的脚本或 CSS 将无法加载。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Customer Info</title>

    <link rel="stylesheet" href="/stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>

    <script type="text/javascript" src="/javascripts/jquery-1.9.1.js"></script>
    <script src="/javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>

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



  </head>
   <body>
        //body contents
   </body>
</html>

我知道问题不在于位置。当我以 express 呈现此 EJS 视图时，没有加载任何脚本。我不明白为什么它适用于几乎相同的视图，但不是这个。有任何想法吗？

4

3 回答 3

4

第1步

在您的node.js文件中找到您配置 express 的部分。

它会像。

 var express = require('express')
               , app = express();

 app.configure(function() {
    //configure the express codes go here
 }

在那检查您配置为静态文件提供服务的文件夹的代码行。比如图片、css和js。我会喜欢的。

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

在上述情况下，这里public应该正是包含您在上述 html 中提到的文件stylesheets夹的父文件夹的名称。javascripts

像

--app.js
--package.json
--views/
--node_modules/
--public/
     --stylesheets/
        --testing.css
     --javascripts/
        --jquery-1.9.1.js
        --jquery-ui-1.10.2.custom.js
        --testing.js

第2步

如果以上配置正确，那么您可以确保

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

在配置中领先于

app.use(app.router);

这样您就可以确保您在路由器中编写的 404 路由处理程序不会忽略您的线路。

第 3 步

Firebug您可以使用or检查呈现的页面，Chrome inspector并在网络选项卡中检查您收到的针对您提到的 js 和 css 文件的响应。根据您的问题，它应该是 404 文件未找到，如果它有其他问题，您应该在问题中更新它。

第4步

如果您仍然无法解决问题，那么您必须使用您正在使用的 node.js 代码更新问题。这样我们就可以调查它。

于 2013-04-18T08:02:46.773 回答
1

我相信是每个 src 行开头的“/”没有使其加载。例如..以这种方式使用它们

<link rel="stylesheet" href="stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>

<script type="text/javascript" src="javascripts/jquery-1.9.1.js"></script>
<script src="javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>

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

好吧，这些脚本和 css 文件位于它们各自的文件夹中，要引用它们，您只需直接从其名称开始源，例如src="folder/script.css"

这是如果文件夹比 html 文件高一级。例如

您的 index.html 文件位于 folder1

您的 style.css 文件位于 folder1 >> css

您的 script.js 文件位于文件夹 1 >> 脚本中

那么对于这个级别，上述建议将 100% 起作用。如果存在其他类型的级别，例如

index.html 在文件夹 1 >> 文件夹 2 >> index.html

style.css 位于文件夹 1 >> css

script.js 在文件夹 1 >> js

那么你的 src 应该看起来像

<link rel="stylesheet" href="./stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>

<script type="text/javascript" src="./javascripts/jquery-1.9.1.js"></script>
<script src="./javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>

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

请注意一个“。” 点在开始。这意味着代码将引用后面一个文件夹中的文件。如果文件在后面 2 个文件夹，则使用它两次，例如././folder1/css

希望有帮助

于 2013-04-17T16:51:43.450 回答
1

您必须将 expressJS 设置为使用静态链接链接您的资产或包含 js 和 css 文件夹的公用文件夹。

express.static(__dirname + '/assets', { maxAge: 24*60*60*1000 }

然后在 href 链接的开头使用点或简单地添加服务器 url。例如：

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

于 2013-04-17T17:54:20.860 回答