【俺的暫定対応】viteビルドのVue3にbootstrap-vueが追加出来なかった場合

8278 ワード
Vue3 bootstrapVue vite Vue.js bootstrap4 Vue.js テキストリンク

はじめに

viteビルドのVue3にbootstrap-vueをインストールして
ビルドしたら下記のようなエラーが出ました。。。

npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `vite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output abo

色々調べてみたものの、Vue3は新しいから色んなプラグイン？フレームワークが対応していない！対応中！みたいなことが書かれていたりしました2020/12月くらいの記事なので、今はちゃんと対応しているかも。。。

調べてもよく分からなかったので暫定対応することにしました

試したこと

１．Vueの共通コンポーネントにBootstrapのCDNリンクを突っ込む
→ダメでした。Vueコンポーネントでは、scriptがIngonerされてしまうので、BootstrapのScriptが読み込めませんでした

２．index.htmlにBootstrapのCDNリンクを突っ込む
VueはSPAでSPAってどうやって動いているかっていうかっていう記事を見たことを思い出しました。
まずはindex.htmlにアクセスされて、そっからjsを読み込んで各ページのhtmlを生成するみたいことが書いてありました
であれば、index.htmlはどこのページにアクセスしても読み込まれるわけなので、ここつっこみました
→うまくいった！

実際のコード

index.html(vueのフォルダ直下のindex.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>

<body>
  <div id="app"></div>
  <!--BootstrapのCDNのやつを読み込む-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>
Header.vue
<template>
<div class="pos-f-t">
  <!-- javascript 使うBootstrap（ボタン押すとひゅーんって表示されるナビゲーションバー）-–>
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Header',
})
</script>

あとはApp.VueでHeader.Vueを読み込んであげると・・・

ひゅーんって動くjavascript入りBootstrapが動きました！

以上。

おわりに

本来ライブラリちゃんとインストールしてあげて一緒にビルドしてあげるのが良いかと思いますが
プロジェクトが重くなったり配信するファイル容量が大きくなることを考えたら
CDN版使ったほうが、色々と負担が減るのではないのかな？とか思ったりしました
ただ、ライブラリいっぱい突っ込んでる場合、JQuery辺りが競合しそうで怖いな～くらいですね

参考文献