カスタムビルド出力ディレクトリ

デフォルトでは、Qwikのビルド出力ディレクトリはプロジェクトのルートフォルダにある`dist`フォルダです。

場合によっては、ビルド出力ディレクトリをデフォルトのパッケージと異なる場所にする必要があります。

誤った方法

通常、Vite.jsでは次のように行います。

vite.config.ts

import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import { qwikCity } from '@builder.io/qwik-city/vite';
import { resolve } from 'node:path';
/* VITE_IMPORTS */
 
export default defineConfig(() => {
  const pagesDir = resolve('pages');
 
  return {
    /* VITE_CONFIG */
    build: {
      outDir: '../resources/', // This will be overrided to `dist` by qwikVite() setting
    },
    plugins: [
      qwikCity({
        pagesDir,
        layouts: {
          default: resolve('src', 'layouts', 'default', 'default.tsx'),
        },
      }),
      qwikVite(/* VITE_QWIK */),
      /* VITE_PLUGINS */
    ],
  };
});

しかし、これは`QwikVite()`の設定によって上書きされるため、何も起こらず、ビルド出力ディレクトリは`dist`フォルダのままです。

正しい方法

そのため、Vite.jsの設定を直接変更する代わりに、`QwikVite()`の設定を次のように変更するだけです。

vite.config.ts

import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import { qwikCity } from '@builder.io/qwik-city/vite';
import tsconfigPaths from 'vite-tsconfig-paths';
 
export default defineConfig(() => {
  return {
    ssr: { target: 'webworker', noExternal: true },
    plugins: [
      qwikCity(),
      qwikVite({
        client: {
          outDir: 'resources/', // This is the right setting
        },
      }),
      tsconfigPaths(),
    ],
  };
});

出力ビルドディレクトリが`resources`になります。必要に応じて、このフォルダの名前を変更してください。

貢献者

このドキュメントの改善にご協力いただいたすべての貢献者に感謝します！