LoginSignup
8
4

More than 1 year has passed since last update.

Vite+Vue3+TypeScript+Vue RouterのプロジェクトをGithub Pagesでデプロイする

Posted at

Vite+Vue3+Vue Routerのプロジェクトをgh-pagesというライブラリを使ってGithub Pagesで簡単に公開する方法とその時の注意点をまとめていきます。

環境

Node v14.18.0
yarn v1.22.5
@vue/cli 5.0.8
プロジェクト名 github-pages-test
https://github.com/daiki-gaasuu/github-pages-test/tree/main

1. プロジェクト作成

  1. yarn create vite プロジェクト名 --template vue-tsでプロジェクト作成
  2. cd github-pages-testプロジェクトに移動
  3. yarn
  4. yarn add vue-router@4※Vue3の場合はvue-router@4になります。
  5. /src/viewsフォルダ配下にHome.vueとAbout.vueを作成

ここまででこんな感じ
スクリーンショット 2022-10-15 6.59.30.png

2. Vue-Routerの設定

  1. /src/router/index.tsを作成
    src/router/index.ts
    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
    
    const routes: Array<RouteRecordRaw> = [
      {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue'),
      },
    ];
    
    const router = createRouter({
      // Viteの環境変数でimport.meta.env.BASE_URL = vite.config.tsのbase
      history: createWebHistory(import.meta.env.BASE_URL),
      routes,
    });
    
    export default router;
    
    自分が初めてGithub PagesにVite+Vue3のプロジェクトをデプロイする時に、ここでcreateWebHistoryの引数を何も設定していなかったのでローカル環境では動くのにビルドしてデプロイするとエラーもないまま画面が真っ白になるという事件でどハマりしました。
    後ほど設定しますが、Github Pagesでデプロイするとルートがhttps://アカウント名.github.io/リポジトリ名/となるんですよ。つまりcrerateWebHistoryにベースはリポジトリ名ですよと指定する必要があったワケです。
    やっぱり公式ドキュメントは読むべきですね:innocent:
    https://router.vuejs.org/api/index.html#createwebhistory
  2. main.tsにrouterを追加
    src/main.ts
    import { createApp } from 'vue'
    import './style.css'
    import App from './App.vue'
    import router from './router' //追加
    
    //use(router)追加
    createApp(App).use(router).mount('#app')
    
  3. App.vueを変更
    src/App.vue
    <script setup lang="ts"></script>
    <template>
      <div class="app" id="app">
        <router-view />
      </div>
    </template>
    

3. Viteの設定ファイル変更

production環境ではGithubのリポジトリをベースとする記述。
ここで設定するbeseの値が先ほどrouter/index.tsで書いたcreateWebHistory()の引数に入ります。

vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  // 下記を追加
  base: process.env.NODE_ENV === 'production' ? '/github-pages-test/' : './',
  plugins: [vue()],
});

ここまでの設定でローカル環境ではyarn devした時にルートアクセスでHome.vueの中身、/aboutにアクセスでAbout.vueの中身が表示されるようになってると思います。

4. Github Pagesでデプロイ

ここからは作成したプロジェクトをGithub Pagesでデプロイする方法を解説していきます。
今回はgh-pagesというライブラリを使ってやります。

  1. プロジェクトルートでgit init
  2. Githubでリポジトリ作成し下記画像にある部分のコマンドでローカルのファイルをリモートへpushする
    スクリーンショット 2022-10-15 8.37.18.png
  3. yarn add gh-pages
  4. package.jsonにデプロイコマンド追加
    package.json
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build",
        "preview": "vite preview",
        "deploy": "gh-pages -d dist" //追加
    }
    
  5. yarn buildでビルド実行
  6. yarn deployでGithub Pagesでデプロイ
        yarn run v1.22.5
        warning ../../../package.json: No license field
        $ gh-pages -d dist
        Published
        ✨  Done in 9.85s.
    

上記のようなログが流れれば無事デプロイ完了です。
自動的にgh-pagesというブランチが作成されていて、そこにyarn buildで生成されたdistディレクトリ以下のファイルがpushされていることが確認できると思います。
また、Github上でSettings→Pagesの中を見ると自動で設定されていてgh-pagesブランチのルート以下が公開されるようになってますね。
https://daiki-gaasuu.github.io/github-pages-test/
スクリーンショット 2022-10-15 8.47.27.png
デプロイされたURLをクリックして問題なく表示されれば完了です!

まとめ

  • Vite+Vue3+Vue RouterのプロジェクトをGithub Pagesでデプロイするときはvite.configのbaseを設定忘れずに
  • router/index.ts内のcreateWebHistory(import.meta.env.BASE_URL)引数base忘れずに
  • gh-pages使うとyarn buildyarn deployの2コマンドでデプロイできるって便利すぎ(もちろん1コマンドにまとめることも可能)

以上!

8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
4