Zenn
🦔

Vue3で静的HTMLのMPAを作る

2024/04/14に公開
Vue 3
devcontainer
tech

chik4geさんが執筆されている記事について、自分で動作確認をしてみた備忘録です。

https://qiita.com/chik4ge/items/d21e75d8dd75bd817c3e

コンテナ環境の準備

node.jsがインストールされている環境を構築します。

VSCodeでコンテナを作成






作成したコンテナ環境を起動するためにリビルドします。

Vue CLIをインストールする

VSCodeのコンテナ環境下のターミナルで作業します。

sudo npm install -g @vue/cli
  • -g(global)オプションをつけると、インストール対象のパッケージの呼び出しが対象のローカルディレクトリだけでなく、どこからでもアクセスできるようになります。

sudoをつけなかった場合のエラー

インストール中のディレクトリ作成権限が足りずにエラーとなります。

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/@vue
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'
...

vue --versionを実行し、問題なくインストールされていれば完了です。

@vue/cli 5.0.8

Vueプロジェクトの作成

vue create test-project
# 選択した設定
# Default ([Vue 3] babel, eslint)
# Use NPM
ログ
🎉  Successfully created project test-project.
👉  Get started with the following commands:

 $ cd test-project
 $ npm run serve

サーバーを起動し、 http://localhost:8080/ にアクセスしてサンプルページが表示されれば完了です。

cd test-project
npm run serve

ファイルを編集する

  • public/sample1/index.html(新規)
    index.html
    + <!DOCTYPE html>
+ <html lang="en">
+
+ <head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>sample1</title>
+ </head>
+
+ <body>
+   <h1>sample1</h1>
+   <a href="/sample2/sample2.html">sample2</a>
+ </body>
+
+ </html>
  • public/sample2/sample2.html(新規)
    sample2.html
    + <!DOCTYPE html>
+ <html lang="en">
+
+ <head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>sample2 Page</title>
+ </head>+

+ <body>
+   <h1>sample2</h1>
+   <a href="/">Back to Top</a>
+ </body>+

+ </html>
  • vue.config.js
    vue.config.js
    const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
+  pages: {
+    // 静的ページのエントリだけだとルートパスがエントリとして認識されずhtmlファイルがテンプレートとして認識されない
+    index: { 
+      entry: 'src/main.js',
+      template: 'public/index.html',
+    },
+    sample1: {
+      entry: 'src/sample1/main.js',
+      template: 'public/sample1/index.html',
+    },
+    sample2: {
+      entry: 'src/sample2/main.js',
+      template: 'public/sample2/sample2.html',
+    }
+  }
})
  • components/HelloWorld.vue
    HelloWorld.vue
    ...
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
+   <h3>サンプルリンク</h3>
+   <ul>
+     <li><a href="/sample1/">sample1</a></li> <!-- index.htmlは省略可能 -->
+     <li><a href="/sample2/sample2.html">sample2</a></li>
+   </ul>
  </div>
</template>
  • src/sample1/main.js(空ファイル)
  • src/sample2/main.js(空ファイル)

動作確認

サーバーを起動した状態で追加したリンクを辿り、それぞれのページに遷移できることを確認しました。

感想

仕事ではよくあるMPAのWebアプリケーションの開発しか触ったことがなかったため、学習目的でVue.jsを利用したアプリケーション開発では利用規約やLPなど、静的ページの取り扱いをどうすればいいかと悩んでいましたが、
この方法を利用すればVue Routerも使わずにシンプルに書けるので使いやすそうでした。
pagesの本来の用途としては異なるVueインスタンスやテンプレートを使い分けるものだということも知れてよかったです。

Discussion