第1步

Question

我正在使用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视图时，没有任何脚本正在加载。我无法理解为什么它可以用于几乎相同的视图，但不是这个视图。有任何想法吗？

Answer 1

第1步

在node.js文件中找到配置快递的部分。

就像。

 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或Chrome inspector检查呈现的页面，并在网络选项卡中检查您收到的对于您提到的js和css文件的响应。根据你的问题，它应该是404文件未找到，如果它的其他东西，你应该在问题中更新它。

第4步

如果您仍无法解决问题，则必须使用您正在使用的node.js代码更新问题。所以我们可以调查一下。

Answer 2

我相信在每个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文件都在各自的文件夹中并引用它们，你只需要直接从它的名字开始源代码，e-g src="folder/script.css"

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

您的index.html文件位于folder1

你的style.css文件位于folder1＆gt;＆gt; CSS

您的script.js文件位于folder1＆gt;＆gt;脚本

然后对于这个级别，上述建议将100％起作用。如果有其他类型的水平，e-g

index.html位于folder1＆gt;＆gt; folder2＆gt;＆gt;的index.html

style.css位于folder1＆gt;＆gt; CSS

script.js位于folder1＆gt;＆gt; 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个文件夹，则使用它两次，e-g ././folder1/css

希望有所帮助

Answer 3

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

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

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

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

脚本没有被调用

3 个答案:

第1步

第2步

第3步

第4步