PUG+Express+Jquery+bootstrap

Posted 2023-03-08

【中文标题】PUG+Express+Jquery+bootstrap

【英文标题】：

【发布时间】：2020-08-31 08:47:30

【问题描述】：

我正在尝试在 NodeJS 中渲染 PUG 页面，jQuery 的问题。

script(language='javascript', src='js/bootstrap.min.js')  //works fine

script(src='https://code.jquery.com/jquery-3.5.1.slim.min.js') //**Not working**

script(src='javascripts/jquery.js')   //javascripts folder in "public"  - **not working.** 

引导程序的相同（工作）逻辑：

app.use(express.static(__dirname + '/node_modules/bootstrap/dist'));   
//not working for jquery:
app.use(express.static(__dirname + '/node_modules/jquery/dist'));
script(src='/jquery.js')                 //**Not working**

jquery 是作为一个包与 npm 一起安装的。 如何将 Jquery 包含在哈巴狗中？

【问题讨论】：

你的路对吗？

我已经尝试了所有路径的变体。我想这是不对的。但我不知道该尝试什么。

您的浏览器控制台有错误吗？

有一个错误，比如在引导之前放置 jQuery，我做到了。浏览器错误消失。但看起来仍然没有加载 jQuery。我认为这是因为路径。我检查了所有可能的教程，但它从未奏效。

您是否要同时加载两个 jquery？一位来自code.jquery.com，一位来自本地？如果是，那么它可能不起作用，只使用一个。

【参考方案1】：

我发现了一个问题。 Jquery 没问题，问题在于 css 无法加载和显示附加图像上显示的内容（预期结果）。

如果您有类似图片或类似的屏幕。 请在 PUG 中检查您的 css 文件。

link(rel='stylesheet', type='text/css', href='/1.css')

如果 css 的名称为“1.css”并且位于文件夹“public”中，这会将 css 添加到您的页面。 另外，不要忘记为您的应用找到“公共”文件夹（在您的服务器 js 文件中）：

app.use(express.static(__dirname + '/public'));