feat(@vant/cli): using vite to build site

packages/vant-cli/changelog.md

@@ -5,6 +5,7 @@
 ### 不兼容更新
 
 - 使用 vite 代替 webpack 进行构建
+- 站点构建产物的目录由 `site` 调整为 `site-dist`
 - 不再支持 webpack.config.js 配置文件
 - 不再内置 babel-plugin-import 插件
 

packages/vant-cli/site/desktop/App.vue

@@ -108,9 +108,9 @@ export default {
         []
       );
 
-      const current = navItems.find((item) => {
-        return item.path === this.$route.meta.name;
-      });
+      const current = navItems.find(
+        (item) => item.path === this.$route.meta.name
+      );
 
       if (current && current.title) {
         title = current.title + ' - ' + title;

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

@@ -25,7 +25,7 @@ export const ES_DIR = join(ROOT, 'es');
 export const LIB_DIR = join(ROOT, 'lib');
 export const DOCS_DIR = join(ROOT, 'docs');
 export const VETUR_DIR = join(ROOT, 'vetur');
-export const SITE_DIST_DIR = join(ROOT, 'site');
+export const SITE_DIST_DIR = join(ROOT, 'site-dist');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
 export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
@@ -34,6 +34,7 @@ export const CACHE_DIR = join(ROOT, 'node_modules/.cache');
 // Relative paths
 export const DIST_DIR = join(__dirname, '../../dist');
 export const CONFIG_DIR = join(__dirname, '../config');
+export const SITE_SRC_DIR = join(__dirname, '../../site');
 
 // Dist files
 export const PACKAGE_ENTRY_FILE = join(DIST_DIR, 'package-entry.js');

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

@@ -1,13 +1,14 @@
-import { createServer } from 'vite';
-import { getViteConfigForSiteDev } from '../config/vite.site';
+import { createServer, build } from 'vite';
+import {
+  getViteConfigForSiteDev,
+  getViteConfigForSiteProd,
+} from '../config/vite.site';
 import { genSiteEntry } from './vant-cli-site-plugin';
 
-async function build() {}
-
 export async function compileSite(production = false) {
   await genSiteEntry();
   if (production) {
-    await build();
+    await build(getViteConfigForSiteProd());
   } else {
     const server = await createServer(getViteConfigForSiteDev());
     await server.listen();

packages/vant-cli/src/config/vite.site.ts

@@ -6,8 +6,10 @@ import vitePluginVue from '@vitejs/plugin-vue';
 import vitePluginJsx from '@vitejs/plugin-vue-jsx';
 import { setBuildTarget, getVantConfig } from '../common';
 import {
-  SITE_DESKTOP_SHARED_FILE,
+  SITE_DIST_DIR,
   SITE_MOBILE_SHARED_FILE,
+  SITE_DESKTOP_SHARED_FILE,
+  SITE_SRC_DIR,
 } from '../common/constant';
 import { injectHtml } from 'vite-plugin-html';
 import type { InlineConfig } from 'vite';
@@ -67,7 +69,7 @@ export function getViteConfigForSiteDev(): InlineConfig {
   const baiduAnalytics = get(vantConfig, 'site.baiduAnalytics');
 
   return {
-    root: join(__dirname, '../../site'),
+    root: SITE_SRC_DIR,
 
     plugins: [
       vitePluginVue({
@@ -112,3 +114,26 @@ export function getViteConfigForSiteDev(): InlineConfig {
     },
   };
 }
+
+export function getViteConfigForSiteProd(): InlineConfig {
+  const devConfig = getViteConfigForSiteDev();
+  const vantConfig = getVantConfig();
+  const outDir = get(vantConfig, 'build.site.outputDir', SITE_DIST_DIR);
+  const publicPath = get(vantConfig, 'build.site.publicPath', '/');
+
+  return {
+    ...devConfig,
+    base: publicPath,
+    build: {
+      outDir,
+      brotliSize: false,
+      emptyOutDir: true,
+      rollupOptions: {
+        input: {
+          main: join(SITE_SRC_DIR, 'index.html'),
+          nested: join(SITE_SRC_DIR, 'mobile.html'),
+        },
+      },
+    },
+  };
+}