Nodejs的静态资源路径不对如何解决

Nodejs的静态资源路径不对如何解决

我要访问页面url为：http://localhost:18080/add/newnet

但因为我没有登陆，会跳转到http://localhost:18080/login

login.ejs如下：

<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/style.css">

然后就会发现，request出来的url是：/add/bootstrap-3.2.0/css/bootstrap.min.css，导致我加载不了相应的css和js文件。

我想在页面加入<base url="http://localhost:18080">类似的标签 但怎么用experess在页面获取类似http://localhost:18080路径吗？

因为要部署在其他环境，写死base肯定不行，需要动态获取。


3 回复

针对你提到的问题，Node.js 应用中的静态资源路径问题可以通过多种方式来解决。一种常见的方法是使用 <base> 标签来指定基础 URL，但你需要确保这个基础 URL 是动态生成的，而不是硬编码的。下面是一个使用 Express 框架的解决方案。

解决方案

步骤 1: 动态设置基础 URL

首先，你需要在 Express 应用中设置一个变量来存储基础 URL。这个变量可以在应用启动时根据当前运行的环境动态设置。

const express = require('express');
const app = express();
const port = process.env.PORT || 18080;

// 假设这是你的基础 URL
app.set('baseUrl', `http://localhost:${port}`);

步骤 2: 在模板中使用基础 URL

接下来，你需要在 EJS 模板中动态插入这个基础 URL。你可以通过传递变量给模板来实现这一点。

app.get('/login', (req, res) => {
    // 将 baseUrl 传递给模板
    res.render('login', { baseUrl: app.get('baseUrl') });
});

在 login.ejs 文件中，你可以这样使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <!-- 使用动态的基础 URL -->
    <base href="<%= baseUrl %>">
    <link rel="stylesheet" href="<%= baseUrl %>/bootstrap-3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%= baseUrl %>/stylesheets/style.css">
</head>
<body>
    <h1>Login Page</h1>
    <!-- 其他 HTML 内容 -->
</body>
</html>

示例代码总结

  1. 设置基础 URL:

    app.set('baseUrl', `http://localhost:${port}`);

  2. 传递基础 URL 给模板:

    res.render('login', { baseUrl: app.get('baseUrl') });

  3. 在模板中使用基础 URL:

    <base href="<%= baseUrl %>">
<link rel="stylesheet" href="<%= baseUrl %>/bootstrap-3.2.0/css/bootstrap.min.css">

通过这种方式，你可以确保无论你的应用运行在哪个环境中，基础 URL 都是动态且正确的。这不仅解决了静态资源路径的问题，还提高了应用的可移植性。


很奇怪，改了一下css和js引入路径如下，href后面加了“/”

<link rel="stylesheet" href="/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">

虽然后台打出的requesturl还是/add/bootstrap-3.2.0/js/bootstrap.min.js，但页面显示正常了。不懂。。。

针对你的问题，可以使用Express框架来动态生成基础URL，并将其传递给视图。你可以通过中间件或者路由处理器来获取当前应用的基础URL，并将其注入到你的视图模板中。

示例代码

首先，你需要安装Express：

npm install express

然后，在你的Express应用中设置一个中间件来处理基础URL的注入：

const express = require('express');
const path = require('path');

const app = express();

// 设置静态资源目录
app.use('/static', express.static(path.join(__dirname, 'public')));

// 设置视图引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 中间件，用于将基础URL传递给视图
app.use((req, res, next) => {
    res.locals.basePath = req.protocol + '://' + req.get('host');
    next();
});

// 登录路由
app.get('/login', (req, res) => {
    res.render('login', { basePath: res.locals.basePath });
});

// 其他路由
app.get('/add/newnet', (req, res) => {
    res.send('This is the new network page');
});

app.listen(18080, () => {
    console.log('Server is running on http://localhost:18080');
});

视图模板

在login.ejs模板中，你可以使用<base>标签来引用正确的路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <!-- 动态生成 base URL -->
    <base href="<%= basePath %>">
    <link rel="stylesheet" href="/static/bootstrap-3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/stylesheets/style.css">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

解释

  1. 中间件：res.locals.basePath用于存储基础URL（例如http://localhost:18080），并在每个请求中传递给视图。
  2. 视图模板：<base href="<%= basePath %>">用于动态设置页面的基础URL，确保所有相对路径的资源都能正确加载。

这样，无论你部署在哪个环境中，都可以动态获取正确的基础URL，避免了硬编码路径的问题。

回到顶部