feat(cli): support locales

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

@@ -10,21 +10,38 @@
 import VanDoc from './components';
 import { config } from 'site-desktop-shared';
 
+function getPublicPath() {
+  const { site } = config.build || {};
+
+  if (process.env.NODE_ENV === 'production') {
+    return (site && site.publicPath) || '/';
+  }
+
+  return '/';
+}
+
 export default {
   components: {
     VanDoc
   },
 
   data() {
-    const { site } = config.build || {};
-    const isProd = process.env.NODE_ENV === 'production';
-    const prodPublicPath = (site && site.publicPath) || '/';
-    const publicPath = isProd ? prodPublicPath : '/';
-
     return {
-      config: config.site,
-      simulator: `${publicPath}mobile.html${location.hash}`
+      simulator: `${getPublicPath()}mobile.html${location.hash}`
     };
+  },
+
+  computed: {
+    config() {
+      const { locales } = config.site;
+
+      if (locales) {
+        const { lang } = this.$route.meta;
+        return locales[lang];
+      }
+
+      return config.site;
+    }
   }
 };
 </script>
@@ -32,7 +49,7 @@ export default {
 <style lang="less">
 .van-doc-intro {
   padding-top: 20px;
-  font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
   text-align: center;
 
   p {

packages/vant-cli/site/desktop/components/Header.vue

@@ -58,6 +58,7 @@ export default {
   },
 
   data() {
+    console.log(this.config);
     return {
       showVersionPop: false
     };

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

@@ -1,38 +1,11 @@
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import App from './App';
-import { routes } from './router';
-import { isMobile } from '../common';
-import '../common/iframe-router';
+import { router } from './router';
 
 if (process.env.NODE_ENV !== 'production') {
   Vue.config.productionTip = false;
 }
 
-Vue.use(VueRouter);
-
-if (isMobile) {
-  location.replace('mobile.html' + location.hash);
-}
-
-const router = new VueRouter({
-  mode: 'hash',
-  routes,
-  scrollBehavior(to) {
-    if (to.hash) {
-      return { selector: to.hash };
-    }
-
-    return { x: 0, y: 0 };
-  }
-});
-
-router.afterEach(() => {
-  Vue.nextTick(() => window.syncPath());
-});
-
-window.vueRouter = router;
-
 new Vue({
   el: '#app',
   mounted() {

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

@@ -1,28 +1,98 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
 import decamelize from 'decamelize';
-import { documents } from 'site-desktop-shared';
+import { isMobile } from '../common';
+import { config, documents } from 'site-desktop-shared';
+import { getLang, setDefaultLang } from '../common/locales';
+import '../common/iframe-router';
 
-const routes = [];
-const names = Object.keys(documents);
+if (isMobile) {
+  location.replace('mobile.html' + location.hash);
+}
 
-routes.push({
-  path: '/home',
-  component: documents.Home
-});
+const { locales, defaultLang } = config.site;
 
-routes.push({
-  path: '*',
-  redirect: '/home'
-});
+setDefaultLang(defaultLang);
 
-names.forEach(name => {
-  routes.push({
-    name,
-    component: documents[name],
-    path: `/${decamelize(name, '-')}`,
-    meta: {
-      name
+function parseName(name) {
+  if (name.indexOf('_') !== -1) {
+    const pairs = name.split('_');
+    const component = pairs.shift();
+
+    return {
+      component: `${decamelize(component, '-')}`,
+      lang: pairs.join('-')
+    };
+  }
+
+  return {
+    component: `${decamelize(name, '-')}`,
+    lang: ''
+  };
+}
+
+function getRoutes() {
+  const routes = [];
+  const names = Object.keys(documents);
+
+  if (locales) {
+    routes.push({
+      path: '*',
+      redirect: `/${getLang()}/`
+    });
+  } else {
+    routes.push({
+      path: '*',
+      redirect: '/'
+    });
+  }
+
+  function addHomeRoute(Home, lang) {
+    routes.push({
+      name: lang,
+      path: `/${lang || ''}`,
+      component: Home,
+      meta: { lang }
+    });
+  }
+
+  names.forEach(name => {
+    const { component, lang } = parseName(name);
+
+    if (component === 'home') {
+      addHomeRoute(documents[name], lang);
     }
+
+    routes.push({
+      name: `${lang}/${component}`,
+      path: `/${lang}/${component}`,
+      component: documents[name],
+      meta: {
+        lang,
+        name: component
+      }
+    });
   });
+
+  return routes;
+}
+
+Vue.use(VueRouter);
+
+export const router = new VueRouter({
+  mode: 'hash',
+  routes: getRoutes(),
+  scrollBehavior(to) {
+    if (to.hash) {
+      return { selector: to.hash };
+    }
+
+    return { x: 0, y: 0 };
+  }
 });
 
-export { routes };
+router.afterEach(() => {
+  Vue.nextTick(() => window.syncPath());
+});
+
+window.vueRouter = router;