资产文件夹中的文件未在子页面中加载答案

【问题标题】：Files inside the assets folder are not being loaded in sub pages资产文件夹中的文件未在子页面中加载
【发布时间】：2017-07-05 01:57:21
【问题描述】：

我有一个像下面这样的文件夹结构

资产
- 引导
- CSS
  - style.css
- js
  - jquery.min.js
查看次数
- 部分
  - head.ejs
  - header.ejs
  - scripts.ejs
- home.ejs
- user_registration.ejs

在我的 app.js 文件中，我将这个资产文件夹设置为：

var app = express();
app.use('/static', express.static('assets'));
var routes = require('./routes/routes');

在我的 routes.js 文件中

exports.userLogin = function(req, res){
    var userLogin = req.params.userId;
    var users = memberData.users;
    res.render('user_registration', {
        title : 'Welcome',
        users : users
    });
};

在我的 head.ejs 文件中

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style.css" type="text/css">

现在在 user_registration 文件中，我有以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <% include partials/head.ejs %>
</head>
<body>
    <% include partials/scripts.ejs %>
</body>
</html>

通过使用我的 jQuery，资产文件夹内的引导文件不会被加载。但是 home.ejs 页面工作正常。
当我在控制台检查时，home.ejs 页面正在以以下格式获取这些文件 http://localhost:3000/static/bootstrap/css/bootstrap.min.css

而 user_registration 页面采用以下格式

http://localhost:3000/user_registration/static/bootstrap/css/bootstrap.min.css

我是 express.js 框架的新手，所以我不知道如何解决这个问题。任何人都可以帮助我。谢谢。

【问题讨论】：

标签： node.js express

【解决方案1】：

问题在您的代码行中app.use('/static', express.static('assets'));。
将其替换为 app.use(express.static(path.join(__dirname, 'assets')));
并在您的 head.ejs 文件中将引导 css 调用行
href="static/bootstrap/css/bootstrap.min.css" 替换为 href="/bootstrap/css/bootstrap.min.css"

希望你明白。

【讨论】：

app.use('/static', ... 挺好的，就是把目标静态资源托管在/static命名空间下
我告诉过你我是怎么做到的。好的，然后在 href 中使用不带/static 的路径

【解决方案2】：

问题是：指向静态资源的href 链接应该是绝对的，而不是相对的。具体来说，在head.ejs 中应该是：

href="/static/bootstrap/css/bootstrap.min.css"
...
href="/static/css/style.css"

不是：

href="static/bootstrap/css/bootstrap.min.css"
...
href="static/css/style.css"

正如app.use('/static', express.static('assets')); 所述，静态资产托管在/static 命名空间下（绝对URL 以/static 开头），不再使用相对URL。

【讨论】：