在Express中通过HBS模板引用私有JavaScript文件的路径问题

别担心，这个问题其实是很多Express新手都会碰到的，核心不是HBS和EJS的差异，而是Express对静态资源的处理逻辑。

首先得明确：Express默认不会对外暴露views目录下的文件——这个目录是用来存放模板文件（比如你的.hbs）的，不是给前端直接访问的静态资源目录。所以要让浏览器能加载到views/js/firebaseAuth.js，你需要做以下配置：

方法一：调整文件结构（更规范的做法） #

我个人推荐这种方式，符合Express项目的常规结构：

1. 在项目根目录新建一个public文件夹，把views/js整个移到public目录下，变成public/js/firebaseAuth.js。
2. 在你的app.js（或项目入口文件）里添加静态资源配置：

   app.use(express.static('public'));
   

3. 然后在login.hbs里用根路径引用脚本：

   <script src="/js/firebaseAuth.js"></script>
   

方法二：直接将views/js设为静态资源目录 #

如果不想移动文件，也可以直接把views/js配置成可访问的静态资源目录：

1. 先在入口文件里引入path模块（Express项目一般都会用到）：

   const path = require('path');
   

2. 添加静态资源路由配置：

   // 把views/js目录映射到前端可访问的/js路径
   app.use('/js', express.static(path.join(__dirname, 'views/js')));
   

3. 同样在login.hbs里用/js/firebaseAuth.js作为引用路径即可，和上面的写法一致。

为什么这样做？因为express.static会告诉Express：当浏览器请求以/js开头的路径时，去views/js目录里找对应的文件并返回给前端。这样就能绕过views目录不对外暴露的限制，正确加载到你的Firebase认证脚本了。

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