Bootstrap 4 jquery错误答案

【问题标题】：Bootstrap 4 jquery errorBootstrap 4 jquery错误
【发布时间】：2018-03-11 07:19:29
【问题描述】：

我已经为 jquery、tether 和 bootstrap 添加了脚本标签，但仍然出现以下错误

我从 Bootstrap 的网站复制了启动模板并尝试在电子应用程序中使用它。

这是 Electron 显示的基本 HTML 模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chap 01</title>
    
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    
    
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            Electron Demo
        </div>
    </div>
    <!--<script src="node_modules/jquery/dist/jquery.js" lang="javascript"></script>
    <script src="node_modules/tether/dist/js/tether.min.js" lang="javascript"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js" lang="javascript"></script>-->
    
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

我也尝试使用 node_modules 文件夹。同样的错误。任何人都可以在这里帮助我了解我为什么会收到错误消息。

index.js

const electron = require('electron');
const { app, BrowserWindow } = electron;

app.on('ready', () => {
 const mainWindow = new BrowserWindow({});
mainWindow.loadURL(`file://${__dirname}/index.html`);
});

【问题讨论】：

标签： jquery electron bootstrap-4

【解决方案1】：

链接错误，请尝试关注Bootstrap 4 Beta 而不是 Alpha，它可以完美运行：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Chap 01</title>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        
        
    </head>
    <body>
        <div class="container">
            <div class="jumbotron">
                Electron Demo
            </div>
        </div>
        <!--<script src="node_modules/jquery/dist/jquery.js" lang="javascript"></script>
        <script src="node_modules/tether/dist/js/tether.min.js" lang="javascript"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" lang="javascript"></script>-->
        
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    </body>
    </html>

【讨论】：

嗨，这在 Electron 应用程序中也不起作用。但是，如果我在 Google Chrome 中正常打开相同的 index.html，则不会出现错误。任何想法为什么。我在电子应用程序中遗漏了什么吗？我也在将 index.js 文件添加到我的问题中，请查看它。

【解决方案2】：

试试这个 Jquery 标签而不是 slim.min.js。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

希望对你有帮助。

【讨论】：

嗨@TidyDev，是的，当我正常打开 index.html 时，SilverSurfer 在 Google Chrome 中建议的代码也很有效。但是当它通过 Electron 加载时，它会给出同样的错误。我有什么遗漏吗？