如何为运行在子目录的Express.js(Node.js)应用配置前端链接

针对你遇到的子目录路径适配问题，这里有几个简洁且可维护的方案，无需硬编码或到处传递配置变量：

方案1：Express全局模板变量（最直接） #

利用Express的app.locals将基础路径注册为全局变量，所有EJS模板可直接访问，不用在每个路由中单独传递。

步骤1：在Express主文件（如app.js）中配置 #

// 可通过环境变量动态配置，本地开发和云环境自动切换
const baseUrl = process.env.BASE_URL || '/proxy/3000/';
// 将基础路径挂载到全局模板变量
app.locals.baseUrl = baseUrl;

步骤2：修改EJS模板中的路径 #

在head.ejs和nav.ejs中，用全局变量拼接路径：

<!-- head.ejs -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<%= baseUrl %>styles.css">
  <title>Blog Ninja | <%= title %></title>
</head>

<!-- nav.ejs -->
<nav>
  <div class="site-title">
    <a href="<%= baseUrl %>"><h1>Blog Ninja</h1></a>
    <p>A Net Ninja Site</p>
  </div>
  <ul>
    <li><a href="<%= baseUrl %>">Blogs</a></li>
    <li><a href="<%= baseUrl %>about">About</a></li>
    <li><a href="<%= baseUrl %>blogs/create">New Blog</a></li>
  </ul>
</nav>

方案2：EJS自定义过滤器（更简洁的模板写法） #

注册一个EJS过滤器，自动处理路径拼接，模板中写法更短：

步骤1：注册过滤器（app.js） #

const ejs = require('ejs');
const baseUrl = process.env.BASE_URL || '/proxy/3000/';

// 注册路径处理过滤器
ejs.filters.basePath = function(path) {
  // 移除路径开头的斜杠，避免重复拼接
  return baseUrl + path.replace(/^\/+/, '');
};

app.engine('ejs', ejs.__express);

步骤2：模板中使用过滤器 #

<!-- head.ejs -->
<link rel="stylesheet" href="<%=: '/styles.css' | basePath %>">

<!-- nav.ejs -->
<li><a href="<%=: '/about' | basePath %>">About</a></li>

方案3：挂载Express路由到子路径（全局路由适配） #

如果你的整个应用都运行在子目录下，可以将所有路由和静态文件挂载到目标子路径，配合全局变量双重保障：

app.js配置 #

const basePath = '/proxy/3000';
app.locals.baseUrl = basePath + '/';

// 静态文件挂载到子路径
app.use(basePath, express.static('public'));

// 所有路由挂载到子路径下
app.use(basePath, require('./routes/index'));
app.use(basePath, require('./routes/about'));
app.use(basePath, require('./routes/blogs'));

这种方式下，模板中的路径写法和方案1一致，同时确保后端路由也适配子目录，避免出现404错误。

内容的提问来源于stack exchange，提问作者RAY