Node/Vue-CLI/Viteを使わずに最速でVueのSPAを作る

13630 ワード
vue-router Vue.js JavaScript vue2 http-vue-loader JavaScript テキストリンク

はじめに

本記事は、Node/Vue-CLI/Viteを使わず、CDNを用いることで最速のVueのSPA環境を構築する記事となります。

環境汚染を気にせず簡易的にVueの実行環境を作りたい方、CUIの知識が薄くてもVueの実行環境を作りたい方、そしてNodeを構築できないサーバでSPAを作りたい方、向けです。

注意：JS-Fiddleは使いません。あくまでローカルでの構築です。

注意：VueのSyntax等は触れません。あくまで環境構築記事です。

背景

自分の大学では無料のサーバが全生徒に用意されているのですが、権限等々の問題からnodeの環境を構築することができず、htmlやCSS程度しか実行することができません。

就活も進む中、せっかくなのでプロフィールページのようなものをSPAで作りたいと思うものの、わざわざアクセス数などしょうもないページを有料で作るのもなんだかなということで、この制約の多い環境でもSPAを作ろう！という意図の下、このような技術を得る経緯となりました。

作成前に持っておいてほしい知識

ある程度のhtmlの知識。あとはコピペでいけます。

私自身が作成前に持っていた知識

私自身は業務でVue3系を使ったフロントエンドエンジニアをやっております。(といいつつもVueの経験は浅い。) そのためある程度の知識はあります。
ですが本記事では上述の通り特にそれに準ずるような必要ありません。

使用技術

  • Vue2系 CDN
  • vue-router CDN
  • http-vue-loader CDN
  • JavaScript

さらっと調べたところCDNのみで3系とvue-routerを実装する方法を見つけられなかったので諦めて2系にしました。(そもそも3系CDNの需要が現状なさそう)

また、SCSSもCDNで構築できるそうなのですが、面倒だったので止めました。

環境構築

ディレクトリ図

root/
  ┣ index.html
  ┣ main.js
  ┣ app.vue
  ┣ page1.vue
  ┗ page2.vue

Vue-CLIやViteを用いないため、上記ファイルは全てCUIの touch コマンドや単純にファイルの新規作成などで作成していただいて構いません。

上記ディレクトリアーキテクチャはあくまで一例です。
コンポーネントディレクトリ/srcディレクトリ/cssディレクトリ/staticディレクトリなどなど自由に用意していただいて構いません。お任せします。
PATHを全て自分で書き連ねるため、自由度が高いです。

index.html

まずは index.html からとなります。

こちらの用途は「描画のベースとなる」「各種外部ファイル/CDN読込の起点となる」というところです。

主なポイントとしては 1. 各種VueのCDNを読み込む・2. id="app"のタグを用意する・3. main.jsを読み込む です。

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">

    <!-- point.1 各種VueのCDNを読み込む -->

    <!-- Vue2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <!-- Vue Router CDN -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- Http Vue Loader CDN -->
    <script src="https://unpkg.com/http-vue-loader"></script>
</head>

<body>
    <h1>index</h1>
    <!-- point.2 id="app"のタグを用意する -->
    <div id="app">
        <app-vue></app-vue>
    </div>
</body>

<!-- point.3 main.jsを読み込む -->
<script src="./main.js"></script>

</html>

point.1 各種VueのCDNを読み込みについて
こちらが全CDNとなります。これで実行準備OKです。かんたん。
＊2021年10月現在、Vue2系の最新版は2.6.14ですが、ご自身の使用時期等に合わせてバージョンの指定を行ってください。

point.2 id="app"のタグを用意するについて
Vueの慣例として id="app" となるタグを起点とします。.vue ファイルに記載されるtemplateなどあらゆるコンポーネントの描画は全てこの中で行われます。
また、今回は <app-vue> というタグを用いております。こちらはVueを用いるにあたり、一旦Vueのロジックは全て index.html ではなく .vue ファイルで完結させたいと思いこのようなアーキテクチャを検討しました。

point.3 main.jsの読み込みについて
これがあることで main.js と紐付きます。

main.js

次に main.js となります。

こちらの用途は「Vueインスタンスの作成(=Vueの起動場所)」「vue-routerの処理置場」というところです。

主なポイントも同様となり 1. Vueインスタンスの作成・2. vue-routerのルーティング です。

main.js
// point.2 vue-router のルーティング
const router = new VueRouter({
  routes: [{
    path: '/',
    component: httpVueLoader('./page1.vue')
  }, {
    path: '/page2',
    component: httpVueLoader('./page2.vue')
  }]
});

// point.1 Vueインスタンスの作成
const app = new Vue({
  el: "#app",
  components: {
    // 起点となる app.vue コンポーネントの指定
    'app-vue': httpVueLoader('./app.vue')
  },
  router // ← vue-router のマウントも忘れずに
});

point.1 【重要】Vueインスタンスの作成について
Vueインスタンスの作成となります。こちらは通常のVue2系とほぼ同様ですが、1点注意点として、今回は Vue-CLI や Vite の代わりに http-vue-loader を用いているためコンポーネントの指定が
  'コンポーネント名': httpVueLoader('VueファイルのPATH指定')
といった書き方なります。
先程 index.html で書いた <app-vue> はここで宣言をしております。

point.2 vue-routerのルーティングについて
vue-routerのルーティングとなります。こちらはVue2系に対応するvue-routerとほぼ同様です。上と同様にこちらもVueファイルへのPATH指定時に http-vue-loader を用います。

app.vue

お次は app.vue となります。

こちらの用途は「Vueロジックの起点」というところです。

主なポイントは 1. vue-router描画の起点処理・2.export方法 です。

app.vue
<template>
  <div>
    <div>Hello CDN Vue!</div>
    <router-view></router-view>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
    }
  },
}
</script>

point.1 vue-routerの描画の起点処理について
4行目、template内に <router-view> タグを記載しております。ここがvue-routerで指定したvueファイルの描画起点となります。
世の中のhttp-vue-loaderを用いた多くの記事ではこのタグをindex.htmlに描いていることが多いですが、その場合、router-viewの外に動的コンポーネントなどを置いた際に処理が煩雑になると感じたため、このようなアーキテクチャを検討しました。

point.2 【重要】export方法について
通常のVueでは export default {} を用いてモジュールのExportを行いますが、http-vue-loaderを用いた場合、module.exports = {} を用います。間違いやすいので注意。
オブジェクトの中身は通常のVue2系と同じです。

page1.vue, page2.vue

最後にvue-routerで読み込むページです。

page1.vue
<template>
  <div>page1</div>
</template>

<script>
module.exports = {
  data() {
    return {
    }
  },
}
</script>
page2.vue
<template>
  <div>page2</div>
</template>

<script>
module.exports = {
  data() {
    return {
    }
  },
}
</script>

ただのVue2系ファイルです。先程同様、export だけ異なるので注意。

以上で準備は完了です。

実行＆トラブルシューティング

あとは通常のhtmlファイル同様、index.html をCLICKするなどして、ブラウザで開きます！

これで下画像のようになっていればOKです。

しかしながら、場合によってはホワイトアウトしていることもあります。

原因1. CORS問題

一番多発するホワイトアウト要因としてCORS問題があります。(恐らく上記の実行方法だと99％そうなります。)

これが原因の場合、まず "index" の文字しか表示されず、更にデベロッパーツールのコンソールを見ると、

Access to XMLHttpRequest at 'hogehogehoge' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

といったエラーが出ています。blocked by CORS policy とあるようにサーバを経由しないためCORSのセキュリティに抵触し、実行が拒否されています。

この場合、最も簡単な回避方法はブラウザの拡張機能で仮想的なサーバを経由することです。

Chromeの場合は "Web Server for Chrome" という拡張機能がおすすめです。 ChromeWebストア：Web Server for Chrome
使い方は各自、調べてください。また、FF / Safari / Edge などの対処法は割愛させていただきます。

原因2. SyntaxERROR など

この他に考えられる大きな原因は文法のエラーやCDNの読み込みエラーです。(逆に言えばCORS以外に面倒なエラーは出づらいです。) 各自ご確認ください。

終わりに

これで最速Vue環境構築は以上となります。

サーバに上げる際は今回用意したファイルをただアップロードするだけで実行可能となります。とても便利です。

CDNという性質上、アーキテクチャの自由度がかなり高いです。ぜひご自身に合わせた改良を行ってください。

また、経験が浅いため修正必要箇所等あるかもしれません。もし見つけられた場合はコメントなどいただけると助かります。

【宣伝】
Qiitaで同様に、Vue3系のViteを用いたSPA開発環境の構築記事も出しております。もしでしたらぜひご覧ください。今回の記事と比較するとかなり重量級です。
Vue3系+TS+Vite を使った0からのSPA開発【 [序章] 環境構築編】