diff --git a/docs/site/mobile.js b/docs/site/mobile.js
index 50a31c973..24d3ce8e2 100644
--- a/docs/site/mobile.js
+++ b/docs/site/mobile.js
@@ -3,6 +3,7 @@ import Locale from '../../src/locale';
 import { get } from '../../src/utils';
 import { camelize } from '../../src/utils/format/string';
 
+// helper for demo locales
 Vue.mixin({
   computed: {
     $t() {
@@ -15,9 +16,24 @@ Vue.mixin({
         return typeof message === 'function' ? message(...args) : message;
       };
     }
+  },
+
+  beforeCreate() {
+    const { i18n, name } = this.$options;
+    if (i18n) {
+      const locales = {};
+      const camelizedName = camelize(name);
+
+      Object.keys(i18n).forEach(key => {
+        locales[key] = { [camelizedName]: i18n[key] };
+      });
+
+      Locale.add(locales);
+    }
   }
 });
 
+// add some basic locale messages
 Locale.add({
   'zh-CN': {
     add: '增加',
diff --git a/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts b/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts
index f2e3a4bde..a0b2290bd 100644
--- a/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts
+++ b/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts
@@ -13,14 +13,13 @@ import {
 type DemoItem = {
   name: string;
   path: string;
+  component: string;
 };
 
 function genInstall() {
   return `import Vue from 'vue';
 import PackageEntry from './package-entry';
 import './package-style';
-
-Vue.use(PackageEntry);
 `;
 }
 
@@ -36,6 +35,12 @@ function genExports(demos: DemoItem[]) {
     .join(',\n  ')}\n};`;
 }
 
+function getSetName(demos: DemoItem[]) {
+  return demos
+    .map(item => `${item.name}.name = 'demo-${item.component}';`)
+    .join('\n');
+}
+
 function genConfig(demos: DemoItem[]) {
   const vantConfig = getVantConfig();
   const demoNames = demos.map(item => decamelize(item.name, '-'));
@@ -66,14 +71,22 @@ function genConfig(demos: DemoItem[]) {
 function genCode(components: string[]) {
   const demos = components
     .map(component => ({
+      component,
       name: pascalize(component),
       path: join(SRC_DIR, component, 'demo/index.vue')
     }))
     .filter(item => existsSync(item.path));
 
-  return `${genInstall()}\n${genImports(demos)}\n\n${genExports(
-    demos
-  )}\n${genConfig(demos)}\n`;
+  return `${genInstall()}
+${genImports(demos)}
+
+Vue.use(PackageEntry);
+
+${getSetName(demos)}
+
+${genExports(demos)}
+${genConfig(demos)}
+`;
 }
 
 export function genSiteMobileShared() {