Vue.js CDNとCLIで勝手が違う

4月から仕事でVue.js + Vuetify環境でシステム開発をやってます。
業務に入る前からVue.jsを使うよ、と言うことで、当初はCDNによる開発を勉強していました。
しかし実際には、サーバ側にVue CLIを導入して開発するということで、環境構築から改めて始めてみたところ、開発方法自体もCDNとは別物だと気付きました。

たぶん、突っ込みどころ満載だと思いますが、突っ込んだら大人として負けだと、生暖かい目で見て下さい。

Vue.jsの開発環境

Vue.jsを使って開発する場合、2つの方法があります。
一つはCDN（Contents Delivery Network）を使う方法。これはHTML上で<script>要素を使って、CDN上にあるVue.jsのパッケージをインポートして利用する方法です。

入力例

<script src="https://cdn.jsdelivr.net/npm/vue@(任意のバージョン)"></script>

もう一つは、CLI(Command Line Interface)を利用する方法。これはコマンドを入力することでVue.jsの開発に必要な機能を取得して利用する方法です。
例えば、仮想のWebサーバを起動した上で、Vue.jsで記述された複数のソースコードを1つのHTML+JavaScriptで記述されたページとしてビルドを行い、ブラウザにそのページを送る、あるいはビルドを行ったページソースをデプロイ（出力）することが出来ます。

それぞれの特徴

CDN

• クライアントだけで開発環境を完結できる(インターネット接続は必須)
• 開発環境の構築が不要
• コンポーネント化する際に、HTML、CSS、Vue.js部分を別ファイルで記述する必要がある
  • http-vue-loader.jsを読み込むことでvueファイルの利用が可能
• SPA(Single Page Application)としての構築が難しく、ページごとの内容、ソースコードがブラウザから閲覧できてしまう。
  • 上記方法でSPAも一応は可能。

CLI

• VueファイルにすることでHTML、CSS、Vue.jsをまとめることが出来る。
• SPAとしての構築が比較的容易（ページ内容、ソースコードがバレにくい）
• デプロイすることで、静的サーバ上でも運用可能
• サーバ側にNode.js、npmをあらかじめインストールする必要がある
• @vue/cliなどのパッケージをインストールする必要がある（追加パッケージがなければ随時インストール)
• リロード設定を入れることで、ソースの更新に併せて表示ページの更新が可能
  • vue.config.js 等の設定ファイルを更新した場合は、サーバの再起動が必要

気軽に始めるならCDNでもかまいませんが、セキュリティ面を考えて、厳密なSPAとして構築するなら、サーバを用意してCLIで構築する方がいいと思います。

職場に於いては、WindowsマシンにWSL2(Ubuntu)とDocker + Docker Composeを導入し、Vue CLI用のコンテナを構築して開発しています。
こうすることで、vue.config.jsを更新して再起動する必要があっても、コンテナ自体を再起動させるだけで、システムやサービスに影響を与えることなく開発を進められます。

参考