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

.gitignore

@@ -16,5 +16,5 @@ es
 lib
 dist
 vetur
-./site
+**/site
 changelog.generated.md

packages/create-vant-cli-app/generators/vue2/package.json.tpl

@@ -15,7 +15,7 @@
     "build": "vant-cli build",
     "release": "vant-cli release",
     "test:coverage": "open test/coverage/index.html",
-    "build-site": "vant-cli build-site && gh-pages -d site"
+    "build-site": "vant-cli build-site && gh-pages -d site-dist"
   },
   "author": "",
   "license": "MIT",

packages/create-vant-cli-app/generators/vue3/package.json.tpl

@@ -16,7 +16,7 @@
     "prepare": "husky install",
     "release": "vant-cli release",
     "test:coverage": "open test/coverage/index.html",
-    "build-site": "vant-cli build-site && gh-pages -d site"
+    "build-site": "vant-cli build-site && gh-pages -d site-dist"
   },
   "author": "",
   "license": "MIT",

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'),
+        },
+      },
+    },
+  };
+}

packages/vant/package.json

@@ -21,7 +21,7 @@
     "build": "vant-cli build",
     "build:site": "vant-cli build-site",
     "release": "vant-cli release --tag next",
-    "release:site": "yarn build:site && gh-pages -d site --add --dest v3",
+    "release:site": "yarn build:site && gh-pages -d site-dist --add --dest v3",
     "test:watch": "vant-cli test --watch",
     "test:coverage": "open test/coverage/index.html"
   },

packages/vant/src/uploader/demo/index.vue

@@ -73,7 +73,7 @@ const fileList5 = ref([
   },
 ]);
 
-const statusFileList = [
+const statusFileList = ref([
   {
     url: 'https://img.yzcdn.cn/vant/leaf.jpg',
     status: 'uploading',
@@ -84,7 +84,7 @@ const statusFileList = [
     status: 'failed',
     message: t('failed'),
   },
-];
+]);
 
 const previewCoverFiles = ref([
   {