Vue.jsのアプリケーションをGithub Pagesに公開するにあたって困ったこと

背景

• Vue.jsで作ったアプリケーションを簡単に共有したい
• GitHub Pagesよくわからん
• Github Pagesにデプロイしたけどjsとcssが404吐く
• build: npm, vite

やったこと

build先をdistからdocsに変更する

GitHub Pagesはrootか/docsしかソースフォルダとして指定できないようです
https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

vite.config.jsにoutDirを明示的に指定しました。

export default defineConfig({
  plugins: [vue(), VueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    outDir: './docs'
  }
})

これでnpm run buildをするとdocsにビルドされるようになります。
https://ja.vitejs.dev/guide/static-deploy

baseで基準となるパスを指定

デフォルトではドメイン直下のルートパスが指定されているようです。

明示的にパスを指定してあげます。

export default defineConfig({
  base: '/moriyamato-pf/',
  plugins: [vue(), VueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    outDir: './docs'
  }
})

おわり

npmなんもわからん。javascriptなんもわからん。viteなんもわからん。webなんもわからん。
結論、なんもわからん。

Vue.jsやりながら勉強していこうと思います。