从Swig迁移至Nunjucks后页面样式与JavaScript无法加载求助

嘿，我之前迁移模板引擎时也碰到过一模一样的问题——页面能渲染但静态资源死活加载不出来，没报错但就是没效果，大概率是模板语法、全局变量或者路径解析逻辑在Swig和Nunjucks之间的差异导致的，咱们一步步排查解决：

1. 全局变量未正确传递 #

Swig里常用的全局变量（比如静态资源根路径asset_path），在Nunjucks里不会自动继承，得手动配置全局变量。

比如你原来的Swig代码可能是这样：

<link rel="stylesheet" href="{{ asset_path }}/css/main.css">
<script src="{{ asset_path }}/js/app.js"></script>

迁移到Nunjucks后，需要在模板环境中添加全局变量（以Express为例）：

const nunjucks = require('nunjucks');
const express = require('express');
const app = express();

// 初始化Nunjucks环境
nunjucks.configure('views', {
  autoescape: true,
  express: app
});

// 把静态资源路径设为全局变量
app.use((req, res, next) => {
  res.locals.asset_path = '/public'; // 替换成你实际的静态资源根目录路径
  next();
});

2. 相对路径解析逻辑变化 #

Swig和Nunjucks对相对路径的解析上下文可能不同：比如Swig会基于当前模板文件的目录解析../css/style.css，但Nunjucks可能基于项目根目录或路由挂载路径解析。

解决方法：

• 优先使用绝对路径（比如/public/css/style.css）替代相对路径
• 检查Nunjucks的root配置，确保模板根目录设置正确：

  nunjucks.configure('./src/views', { // 明确指定模板所在目录
    autoescape: true,
    express: app
  });
  

3. 模板继承中的路径问题 #

如果用了模板继承（extends），父模板里的静态资源路径在子模板中可能因为继承上下文变化而出错：

• 确认父模板文件名是否正确修改（比如从layout.swig改成layout.njk）
• 检查子模板的继承语法：Nunjucks和Swig的继承语法一致，但要确保路径指向正确的父模板文件

4. 静态资源服务配置遗漏 #

别忽略后端的静态资源服务！即使模板渲染正常，如果没配置静态资源路由，浏览器还是找不到文件。比如Express里要保留：

// 托管静态资源目录
app.use(express.static('public'));

打开浏览器的Network面板，查看静态资源的请求状态：

• 如果请求路径是undefined/css/main.css：说明全局变量没传递成功
• 如果是404状态：说明静态资源路径写错，或者静态资源服务没配置对

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