自定义构建输出目录

默认情况下，Qwik 的构建输出目录是项目根文件夹中的 dist 文件夹。

在某些情况下，有时我们需要自定义构建输出目录。

错误方式

通常使用 Vite.js，我们会这样做：

// vite.config.js
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() 中的设置，如下所示：

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，请根据需要重命名此文件夹名称。