Viteで従来型静的サイト

Viteで静的サイト

皆さんこんにちは!!私が来た!!!!
......ん?
今回はViteでファイルベースルーティング(ngix,Apacheなど)でweb開発をする際の注意点をまとめます

1.ファイルの場所

全てsrcの中に入れましょう
それだけです....

2.vite.config.ts(js)

今回のメインディッシュです。
github copilotと一緒に作りました
npm i globを先にしといてください(追記

vite.config.ts

/** @type {import('vite').UserConfig} */

import * as path from 'path'
import { sync as globSync } from 'glob'

const htmlFiles = globSync('src/**/*.html')
  .reduce((acc, curr) => {
    const key = path.relative('src', curr).replace('.html', '')
    acc[key] = curr
    return acc
  }, {} as Record<string, string>)

export default {
    root: 'src',
    build: {
        outDir: "../dist",
        emptyOutDir: false,
        copyPublicDir: "public",
        rollupOptions: {
            input: htmlFiles
          }
    }
}

終わりに

...いかがでしたが(くそblogのまね)
とりあえずこれコピペしとけば動きます...
詳細はcopilot君に聞け～
まぁほとんど英単語だからある程度分かるけど...
さようなら～!!
こうするとtailwindCSSもいろんなlibraryも使えるぜ～!!!!!!!!