自訂建置輸出目錄

預設情況下，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，請根據需要重新命名此資料夾名稱。

貢獻者

感謝所有幫助改進此文件的貢獻者！