自定义构建输出目录

默认情况下，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/', // 这将被 qwikVite() 设置覆盖为 `dist`
    },
    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/', // 这是正确的设置
        },
      }),
      tsconfigPaths(),
    ],
  };
});

这样，输出的构建目录就变成了 resources，请根据需要重新命名此文件夹名称。

Contributors

Thanks to all the contributors who have helped make this documentation better!