Open2025/01/14にコメント追加1

VitePressの良いフォルダ構成を考える

JavaScript

yamadashy

VitePress公式を参考にしましょう。
viteやvitestなどもドキュメントはVitePressでできていますが、現状で最もうまく構成されているのは公式のdocsです。

公式の構成

公式は以下のような構成。英語や各言語のフォルダが docs 直下にあります。

docs/
  .vitepress/
    config/ ... config.ts 相当のもの
    theme/ ... テーマ設定
  components/ ... .vueなどのコンポーネント
en/ ... 英語
es/ ... スペイン語
...他の言語
public/ ... そのまま公開される画像などのアセット系ファイル
package.json

config フォルダ以下を見るとわかりますが、index.ts をエントリポイントとして。en.ts, es.ts など各言語ごとにthemeConfigが別ファイルにされていて、比較のしやすい構成になっています。

また、 en フォルダを切れるように config.tsに以下が書かれています。これを書かないと en 向けのドキュメントを docs 直下に置くことになり見通しが悪くなります。

export default defineConfig({
  rewrites: {
    // rewrite to `en` locale
    'en/:rest*': ':rest*',
  },
  // ...
});

私の構成

各言語のフォルダを直下に置いているのが個人的には少し気持ち悪いので、publicや各言語のフォルダを1階層下げます。

docs/
  .vitepress/
    config/ ... config.ts を細かく分割したもの。index.tsがエントリポイントとなり、en.tsなどの各言語のthemeConfigを定義している
    theme/ ... テーマ設定
  components/ ... .vueなどのコンポーネント
  src/
    en/ ... 英語
    es/ ... スペイン語
    ...他の言語
    public/ ... そのまま公開される画像などのアセット系ファイル
package.json

config.ts にこう書くと src 以下に各言語のフォルダやpublicを置くことができます。

export default defineConfig({
  srcDir: 'src',
  // ...
});

ご参考までに。