自定义构建输出目录

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

贡献者

感谢所有帮助改进本文档的贡献者！