Bootstrap 的 javascript 在本地工作，但在部署到服务器时不能工作答案

【问题标题】：Bootstrap's javascript works locally but not when deployed to a serverBootstrap 的 javascript 在本地工作，但在部署到服务器时不能工作
【发布时间】：2012-08-21 19:18:45
【问题描述】：

我下载了 Twitter 引导程序的准系统示例并对其进行了自定义。我在本地（使用 WAMP 服务器）对其进行了测试，CSS 和 JScript 都运行良好。

我将文件上传到我的虚拟主机服务，但 JScript 无法正常工作。我注意到它是因为下拉框停止工作。

我搜索并找到了其他有同样问题的人，但他们都在使用 ruby，而我没有。只是bootstrap提供的播放CSS+JScript。此外，他们说解决方案是先包含 bootstrap.js，然后再包含 jquery.js。好吧，我试过了，它没有用，我什至包含了未缩小的 .js，但它仍然没有用。

我使用相同的浏览器 (Chrome) 进行本地和远程测试。我也尝试了不同的托管服务，但两者都出现了问题。

非常感谢您的帮助。

其他类似问题：

【问题讨论】：

标签： javascript jquery twitter-bootstrap web-deployment css-frameworks

【解决方案1】：

问题可能是您在 jQuery 之前加载了 boostrap.js。在本地，您的浏览器可能正在使用 Jquery 的缓存副本，因此它可以在本地运行，但不能在您的实时站点上运行。尝试通过在代码中切换这两行来修复它：

<script src="/code4pt/styles/js/bootstrap.js"></script>
<script src="/code4pt/styles/js/jquery.js"></script>

【讨论】：

为什么不将 jquery 附加到您的引导程序中？

【解决方案2】：

我知道这很奇怪，但我想我找到了解决方案。以前我使用的是（提供的）jQuery 1.7.2 缩小版。现在我将其更改为使用未缩小的 jQuery 1.8.0。它刚刚开始工作......我做的另一件事是将所有文件的 encoding 转换为 UTF8（我认为这是真正的问题/解决方案）

【讨论】：

编码和行分隔符是真正的罪魁祸首，您的回答帮助我快速修复它。部署后整个响应式布局在移动设备中消失时，我完全失望了 :-) 非常感谢！
你们如何将编码更改为 UTF8，我也有类似的问题。我正在使用“jquery”：“^3.5.1”

【解决方案3】：

我遇到了同样的问题。在 IE 中，该站点在 localhost 上运行，但在托管在不同的服务器上时却没有。添加以下元标记修复它。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

【讨论】：

放在哪里？在哪个节点下？

【解决方案4】：

我遇到了完全相同的问题，所以发现这篇文章和其他类似的帖子让我松了一口气。我的决议是相似的。我把头发拉了半天，尝试了所有不同的东西。遛过狗。喝了半打啤酒。睡在上面。吃过早饭。将顶部的样式表重新复制回来，并将底部的 js 从本地 html 复制到服务器 php，然后由于某种未知原因它再次开始工作。唯一对其他人有用的点：

尝试回到工作场景——在我的例子中，index.html 正在服务器上工作，但 index.php 没有。让这些完全相同是关键。
尝试使用不同的浏览器，以防万一出现异常情况。
确保您不断清除浏览器缓存（例如，右键单击 Chrome 中的重新加载按钮并选择“清空缓存并硬重新加载”）
检查您的引导 css 和 js 版本。在版本中向前和向后更改它们，直到您获得成功。很有可能，您的引导主题下载随附的版本是最有可能使用的版本。

【讨论】：

继续清除浏览器缓存 - 为我工作 +1

【解决方案5】：

我之前也遇到过类似的问题。选项卡功能在我的 HTML 站点中运行良好，但在编码为 Wordpress 主题时无法运行。所有源 URL 都是使用 Wordpress 动态生成的。

当我将所有 JS 链接添加到页脚而不是页眉时，选项卡终于开始工作了。

【讨论】：

【解决方案6】：

回到基础：如果 Debug 在本地计算机上设置为 true，而在部署环境中设置为 false，请确保您的 .min.js 文件不会覆盖您对非缩小版本所做的自定义.js 文件（也适用于 .css）。

您也可以在本地机器上关闭调试，您应该会看到同样的问题。

【讨论】：

这是一个绝妙的主意。不幸的是，它对我没有帮助:-(但值得其他人尝试。

【解决方案7】：

聚会迟到了，但我发现我的问题是 Bootstrap.js 在部署期间没有被推出。

【讨论】：

在我的情况下，我的远程 jquery.min.js 是 40K，但本地是 85K。 Dreamweaver 不想用本地的覆盖它，所以我必须先删除，然后一切都很好。因此，请检查所有 .js 文件的大小是否正确（可能将它们全部删除并重新加载以确保）

【解决方案8】：

除了@dialex 和@Darrell 的非常有用的建议之外，我还要补充一点，如果这些都不起作用，您可以查看您可能链接到的任何代码，即。通过require ('page.php');，用于重复。重复的 .js 链接往往会导致这些问题。

【讨论】：

【解决方案9】：

我在自己构建并上传到 Amazon S3 的网站上遇到了这个问题。在我的本地机器甚至我的本地服务器上运行良好，但从亚马逊提供服务时无法正常工作。 Firefox（但不是 Chrome）中的控制台显示它无法加载 bootstrap.min.css（等），因为它们的 MIME 类型不是 text/css。

我不得不使用 S3 控制台强制将它们的类型更改为 text/css、清除缓存并重新加载。瞧！

【讨论】：

【解决方案10】：

我正在使用 Codeigniter。我通过在 config.php 中更改 base_url 来解决这些问题。

上一页：

$config['base_url'] = 'http://localhost/public_html';

更改为：

$config['base_url'] = 'http://(my intranet server ip adress)/public_html';

【讨论】：

【解决方案11】：

遇到同样的问题

在我的 .html 文件中，我有这一行

<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>

改成这个后

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

一切正常。我猜内部 webjars 有 http 和更改 css 链接以开始 https 解决了我的问题

【讨论】：