feat(cli): support locales

packages/vant-cli/site/mobile/components/DemoHome.vue

@@ -8,7 +8,7 @@
     <template v-for="(group, index) in config.nav">
       <demo-home-nav
         :group="group"
-        :base="$vantLang"
+        :lang="lang"
         :key="index"
       />
     </template>
@@ -24,10 +24,21 @@ export default {
     DemoHomeNav
   },
 
-  data() {
-    return {
-      config: config.site
-    };
+  computed: {
+    lang() {
+      const { lang } = this.$route.meta || {};
+      return lang;
+    },
+
+    config() {
+      const { locales } = config.site;
+
+      if (locales) {
+        return locales[this.lang];
+      }
+
+      return config.site;
+    }
   }
 };
 </script>

packages/vant-cli/site/mobile/components/DemoHomeNav.vue

@@ -18,7 +18,7 @@
       <template v-for="(navItem, index) in group.items">
         <van-cell
           :key="index"
-          :to="'/' + navItem.path"
+          :to="`${base}/${navItem.path}`"
           :title="navItem.title"
           is-link
         />
@@ -39,7 +39,7 @@ export default {
   },
 
   props: {
-    base: String,
+    lang: String,
     group: Object
   },
 
@@ -47,6 +47,12 @@ export default {
     return {
       active: []
     };
+  },
+
+  computed: {
+    base() {
+      return this.lang ? `/${this.lang}` : '';
+    }
   }
 };
 </script>

packages/vant-cli/site/mobile/components/DemoNav.vue

@@ -19,8 +19,7 @@ export default {
 
   computed: {
     title() {
-      const route = this.$route || {};
-      const { name } = route.meta || {};
+      const { name } = this.$route.meta || {};
       return name ? name.replace(/-/g, '') : '';
     }
   },

packages/vant-cli/site/mobile/main.js

@@ -1,34 +1,17 @@
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import DemoBlock from './components/DemoBlock';
 import DemoSection from './components/DemoSection';
-import { routes } from './router';
+import { router } from './router';
 import App from './App';
 import '@vant/touch-emulator';
-import '../common/iframe-router';
 
 if (process.env.NODE_ENV !== 'production') {
   Vue.config.productionTip = false;
 }
 
-Vue.use(VueRouter);
 Vue.component(DemoBlock.name, DemoBlock);
 Vue.component(DemoSection.name, DemoSection);
 
-const router = new VueRouter({
-  mode: 'hash',
-  routes,
-  scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 }
-});
-
-router.afterEach(() => {
-  if (!router.currentRoute.redirectedFrom) {
-    Vue.nextTick(window.syncPath);
-  }
-});
-
-window.vueRouter = router;
-
 new Vue({
   el: '#app',
   render: h => h(App),

packages/vant-cli/site/mobile/router.js

@@ -1,29 +1,86 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
 import decamelize from 'decamelize';
 import DemoHome from './components/DemoHome';
-import { demos } from 'site-mobile-shared';
+import { demos, config } from 'site-mobile-shared';
+import { getLang, setDefaultLang } from '../common/locales';
+import '../common/iframe-router';
 
-const routes = [];
-const names = Object.keys(demos);
+const { locales, defaultLang } = config.site;
 
-routes.push({
-  path: '/home',
-  component: DemoHome
-});
+setDefaultLang(defaultLang);
 
-routes.push({
-  path: '*',
-  redirect: '/home'
-});
+function getRoutes() {
+  const routes = [];
+  const names = Object.keys(demos);
+  const langs = locales ? Object.keys(locales) : [];
 
-names.forEach(name => {
-  routes.push({
-    name,
-    component: demos[name],
-    path: `/${decamelize(name, '-')}`,
-    meta: {
-      name
+  if (langs.length) {
+    routes.push({
+      path: '*',
+      redirect: () => `/${getLang()}/`
+    });
+
+    langs.forEach(lang => {
+      routes.push({
+        path: `/${lang}`,
+        component: DemoHome,
+        meta: { lang }
+      });
+    });
+  } else {
+    routes.push({
+      path: '*',
+      redirect: () => '/'
+    });
+
+    routes.push({
+      path: '',
+      component: DemoHome
+    });
+  }
+
+  names.forEach(name => {
+    const component = decamelize(name, '-');
+
+    if (langs.length) {
+      langs.forEach(lang => {
+        routes.push({
+          name: `${lang}/${component}`,
+          path: `/${lang}/${component}`,
+          component: demos[name],
+          meta: {
+            name
+          }
+        });
+      });
+    } else {
+      routes.push({
+        name,
+        path: `/${component}`,
+        component: demos[name],
+        meta: {
+          name
+        }
+      });
     }
   });
+
+  return routes;
+}
+
+Vue.use(VueRouter);
+
+export const router = new VueRouter({
+  mode: 'hash',
+  routes: getRoutes(),
+  scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 }
 });
 
-export { routes };
+router.afterEach(() => {
+  if (!router.currentRoute.redirectedFrom) {
+    Vue.nextTick(window.syncPath);
+  }
+});
+
+window.vueRouter = router;