如何在Views目录的Pug文件中调用外部JS文件的函数？

根据你的场景，Pug文件在views目录，JS文件不在views和public目录下，要让按钮的onclick成功调用myfunc()，核心是让浏览器能加载到这个JS文件，同时保证函数处于全局作用域。下面提供两种可行方案：

方案1：将外部JS挂载为静态资源（推荐） #

如果用的是Express这类Node.js框架，你可以额外配置一个静态资源目录指向JS所在位置，让服务器能对外提供这个JS文件的访问：

1. 在服务端入口文件（比如app.js）里添加静态资源挂载：

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

// 保留原有的public目录挂载
app.use(express.static('public'));
// 新增挂载JS所在的外部目录，示例中JS放在项目根目录的`external-scripts`文件夹下
app.use(express.static('external-scripts'));

2. 在你的Pug模板里，通过script标签引入这个JS文件：

// 假设JS文件名为my-script.js，放在external-scripts目录下
script(src='/my-script.js')
button.btn.btn-primary(onclick='myfunc()') Function 1

这样浏览器就能正常加载JS文件，myfunc()会成为全局函数，点击按钮即可触发。

方案2：在Pug模板内嵌入JS代码 #

如果不想配置额外静态目录，也可以在服务端读取JS文件内容，直接内嵌到Pug模板中：

1. 在渲染Pug的路由里，读取外部JS文件内容：

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

app.get('/', (req, res) => {
  // 读取外部JS文件，示例路径为项目根目录下的external-scripts/my-script.js
  const jsContent = fs.readFileSync(path.join(__dirname, 'external-scripts', 'my-script.js'), 'utf8');
  res.render('你的模板名称', { jsContent });
});

2. 在Pug模板里输出内嵌的JS代码：

script !{jsContent}
button.btn.btn-primary(onclick='myfunc()') Function 1

注意用!{}而非#{}，避免JS代码被转义，确保函数能正常定义为全局函数。

另外要确认：如果你的JS用了ES模块写法，需要把函数挂载到window上（比如window.myfunc = function(){...}），否则无法通过onclick调用。

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