feat(cli): support vite.config.ts (#11223)

packages/vant-cli/docs/config.md

@@ -177,17 +177,16 @@ When set to `true`, `export * from 'xxx'` will be used to export all modules and
 
 ### build.configureVite
 
-- Type: `(config: InlineConfig): InlineConfig`
+- Type: `(config: InlineConfig): InlineConfig | undefined`
 - Default: `undefined`
 
-Custom vite config(`@vant/cli>= 4.0.0`)
+Custom [vite config](https://vitejs.dev/config/), requires `@vant/cli>= 4.0.0`.
 
 ```js
 module.exports = {
   build: {
     configureVite(config) {
-      // add vite plugin
+      config.server.port = 3000;
-      config.plugins.push(vitePluginXXX);
       return config;
     },
   },
@@ -214,6 +213,10 @@ module.exports = {
 };
 ```
 
+Note that you are not allowed to import vite plugins in `vant.config.mjs`, because the file will be bundled into the website code.
+
+If you need to configure some vite plugins, please create a `vite.config.ts` file in the same directory of `vant.config.mjs`, in which you can add any vite configuration (this feature requires @vant/cli 5.1.0).
+
 ### build.packageManager
 
 - Type: `'npm' | 'yarn' | 'pnpm'`

packages/vant-cli/docs/config.zh-CN.md

@@ -177,17 +177,16 @@ module.exports = {
 
 ### build.configureVite
 
-- Type: `(config: InlineConfig): InlineConfig`
+- Type: `(config: InlineConfig): InlineConfig | undefined`
 - Default: `undefined`
 
-vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。
+vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)（从 4.0.0 版本开始支持）。
 
 ```js
 module.exports = {
   build: {
     configureVite(config) {
-      // 添加一个自定义插件
+      config.server.port = 3000;
-      config.plugins.push(vitePluginXXX);
       return config;
     },
   },
@@ -216,6 +215,10 @@ module.exports = {
 };
 ```
 
+注意，由于 `vant.config.mjs` 文件会被打包到文档网站的代码中，因此 `configureVite` 中不允许引用 vite 插件。
+
+如果需要配置 vite 插件，可以在 `vant.config.mjs` 的同级目录下创建 `vite.config.ts` 文件，在该文件中你可以添加任意的 vite 配置（该特性从 @vant/cli 5.1.0 版本开始支持）。
+
 ### build.packageManager
 
 - Type: `'npm' | 'yarn' | 'pnpm'`

packages/vant-cli/src/common/index.ts

@@ -1,7 +1,7 @@
 import fse from 'fs-extra';
 import { sep, join } from 'path';
 import { SRC_DIR, getVantConfig } from './constant.js';
-import type { InlineConfig } from 'vite';
+import { InlineConfig, loadConfigFromFile, mergeConfig } from 'vite';
 
 const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } =
   fse;
@@ -114,13 +114,33 @@ export function smartOutputFile(filePath: string, content: string) {
   outputFileSync(filePath, content);
 }
 
-export function mergeCustomViteConfig(config: InlineConfig): InlineConfig {
+export async function mergeCustomViteConfig(
+  config: InlineConfig,
+  mode: 'production' | 'development'
+): Promise<InlineConfig> {
   const vantConfig = getVantConfig();
   const configureVite = vantConfig.build?.configureVite;
 
+  const userConfig = await loadConfigFromFile(
+    {
+      mode,
+      command: mode === 'development' ? 'serve' : 'build',
+    },
+    undefined,
+    process.cwd()
+  );
+
   if (configureVite) {
-    return configureVite(config) || config;
+    const ret = configureVite(config);
+    if (ret) {
+      config = ret;
+    }
   }
+
+  if (userConfig) {
+    return mergeConfig(config, userConfig.config);
+  }
+
   return config;
 }
 

packages/vant-cli/src/compiler/compile-bundles.ts

@@ -34,8 +34,13 @@ export async function compileBundles() {
     getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS;
 
   await Promise.all(
-    bundleOptions.map((config) =>
+    bundleOptions.map(async (config) =>
-      build(mergeCustomViteConfig(getViteConfigForPackage(config)))
+      build(
+        await mergeCustomViteConfig(
+          getViteConfigForPackage(config),
+          'production'
+        )
+      )
     )
   );
 }

packages/vant-cli/src/compiler/compile-site.ts

@@ -29,10 +29,16 @@ export function genSiteEntry(): Promise<void> {
 export async function compileSite(production = false) {
   await genSiteEntry();
   if (production) {
-    const config = mergeCustomViteConfig(getViteConfigForSiteProd());
+    const config = await mergeCustomViteConfig(
+      getViteConfigForSiteProd(),
+      'production'
+    );
     await build(config);
   } else {
-    const config = mergeCustomViteConfig(getViteConfigForSiteDev());
+    const config = await mergeCustomViteConfig(
+      getViteConfigForSiteDev(),
+      'development'
+    );
     const server = await createServer(config);
     await server.listen(config.server?.port);