构建 Vue 应用程序并使用 Bootstrap 而不包含在构建中答案

【问题标题】：Building Vue app and use Bootstrap without including in the build构建 Vue 应用程序并使用 Bootstrap 而不包含在构建中
【发布时间】：2021-11-10 17:16:09
【问题描述】：

我现在正在学习如何构建 Vue 应用程序，但在使用 Bootstrap 和 Jquery 时遇到了一些问题

应用程序将部署到的网站已经加载了 Bootstrap 和 Jquery 作为该网站的一部分，我只打算将这个新的 Vue 应用程序添加到该网站的一部分。

我对此进行了一些研究，但大多数建议是在我的 Vue 构建中包含 Bootstrap-Vue。如果不需要的话，我不想这样做，从那时起，我将在网站上再次包含 Bootstrap。

有没有办法构建我的 Vue 应用程序并进行编译，并且在编译时不会抛出错误？

现在，我可以只在 index.html 中包含引导 css、js 和 jquery 文件，但是一旦我使用 Jquery，它就不会构建，因为我没有将它包含在项目中，例如：

$(".modal").modal("show")

【问题讨论】：

标签： jquery twitter-bootstrap vue.js

【解决方案1】：

找到了一种我认为的方式。

在 vue.config.js （如果没有就创建）文件中添加以下内容

module.exports = {
    //...
    configureWebpack: {
            externals: {
        jquery: 'jQuery',
        }
    }
  };

在使用 Jquery 的组件中，添加并导入

import $ from 'jquery';

在您的 public/index.html 文件中添加脚本

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    
    <div id="app"></div>
      
    <!-- built files will be auto injected -->
    <script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"
></script>
  </body>
</html>

【讨论】：