diff --git a/build/locale.js b/build/locale.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c81e675052c8845dbd800cdfdc92dab0d49d9ba
--- /dev/null
+++ b/build/locale.js
@@ -0,0 +1,8 @@
+const readDir = require('fs').readdirSync;
+const files = readDir('./src/locale/lang');
+const entry = {};
+files.forEach(file => {
+    const name = file.split('.')[0];
+    entry[name] = './src/locale/lang/' + file;
+});
+module.exports = entry;
diff --git a/build/webpack.locale.config.js b/build/webpack.locale.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..89434ffcccaaf254b96b9ca0f55df291c7d5f0f5
--- /dev/null
+++ b/build/webpack.locale.config.js
@@ -0,0 +1,50 @@
+const path = require('path');
+const webpack = require('webpack');
+const entry = require('./locale');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+process.env.NODE_ENV = 'production';
+
+module.exports = {
+    devtool: 'source-map',
+    entry,
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                options: {
+                    sourceMap: true,
+                },
+                exclude: /node_modules/
+            }
+        ]
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist/locale'),
+        publicPath: '/dist/locale/',
+        filename: '[name].js',
+        library: 'bview/locale',
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+    },
+    externals: {
+        vue: {
+            root: 'Vue',
+            commonjs: 'vue',
+            commonjs2: 'vue',
+            amd: 'vue'
+        }
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"'
+            }
+        }),
+        new UglifyJsPlugin({
+            parallel: true,
+            sourceMap: true,
+        })
+    ]
+};
diff --git a/package.json b/package.json
index b7bba85968b8100061c951315d9b06d2a5809c0f..86e7a7cf7cf77f9971785f0aba398c4c1392b970 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "dist:prod": "webpack --config build/webpack.prod.conf.js",
     "dist:style": "gulp --gulpfile build/build-styles.js",
     "dist:dep": "webpack --config build/webpack.prod.dep.conf.js && gulp --gulpfile build/build-copy.js",
-    "dist": "npm run dist:prod && npm run dist:dep && npm run dist:style",
+    "dist:locale": "webpack --config build/webpack.locale.config.js",
+    "dist": "npm run dist:prod && npm run dist:dep && npm run dist:style && npm run dist:locale",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "changelog:all": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "lib": "npm run dist && npm run changelog && npm publish --access=public"
diff --git a/src/components/Confirm/Confirm.vue b/src/components/Confirm/Confirm.vue
index 420bb634e2efd0971988e2f573ca939da2df9f77..32cad686491f2b55f40358621d72e711493bd07d 100644
--- a/src/components/Confirm/Confirm.vue
+++ b/src/components/Confirm/Confirm.vue
@@ -70,6 +70,7 @@ See the Mulan PSL v2 for more details.
 </template>
 
 <script>
+import Locale from '../../mixins/locale'
 import RenderCell from '../RenderCell'
 import { Icon } from 'view-design'
 import Button from '../Button'
@@ -86,6 +87,7 @@ export const iconType = {
 
 export default {
   name: 'BCConfirmCel',
+  mixins: [Locale],
   components: {
     RenderCell, IModal: Modal, IButton: Button, IIcon: Icon
   },
@@ -114,8 +116,8 @@ export default {
         onCancel: function () {},
         contentRender: '',
         width: 'auto',
-        cancelText: '取消',
-        okText: '确定',
+        cancelText: this.t('i.modal.cancelText'),
+        okText: this.t('i.modal.okText'),
         isMiddle: true,
         useLoading: false
       },
diff --git a/src/components/Page/PageRecordScan.vue b/src/components/Page/PageRecordScan.vue
index cd2a9d720d2751f04998d93781047cc6b6ea887b..78b4dd7ae6bfa49b8da2e8334c29292970e92291 100644
--- a/src/components/Page/PageRecordScan.vue
+++ b/src/components/Page/PageRecordScan.vue
@@ -18,8 +18,8 @@ See the Mulan PSL v2 for more details.
 -->
 <template>
   <div class = "page-record-scan-content">
-    <span>共&nbsp;{{ total }}&nbsp;条记录</span>
-    <span :style="{'margin-left':'16px'}">每页显示<Select
+    <span>{{ t('i.page.total') }}&nbsp;{{ total }}&nbsp;<span v-if="total <= 1">{{ t('i.page.item') }}</span><span v-else>{{ t('i.page.items') }}</span>{{ t('i.page.record') }}</span>
+    <span :style="{'margin-left':'16px'}">{{ t('i.page.display') }}<Select
       :transfer="transfer"
       :placement="placement"
       :style="{'width':'60px','margin-left':'5px','margin-right':'5px'}"
@@ -29,16 +29,18 @@ See the Mulan PSL v2 for more details.
         :value="limit"
         :key="limit">
         {{ limit }}
-    </Option></Select> 条</span>
+    </Option></Select> {{ t('i.page.items') }}</span>
   </div>
 </template>
 <script>
 import {Select, Option} from 'view-design'
+import Locale from '../../mixins/locale'
 export default {
   components: {
     Select,
     Option
   },
+  mixins: [Locale],
   filters: {
     number: function (val) {
       return Number(val)
diff --git a/src/components/Page/index.vue b/src/components/Page/index.vue
index 380790718f7bb3676dc96a2d24db01c1806bb054..0dc16a61a656d10ef73963497dfbf83ca515ba39 100644
--- a/src/components/Page/index.vue
+++ b/src/components/Page/index.vue
@@ -143,14 +143,16 @@ See the Mulan PSL v2 for more details.
       type="secondary"
       class="page-button-go"
       @click="goChange"
-      :size = "size"><slot name="pageTitle">前往</slot></bbutton>
+      :size = "size"><slot name="pageTitle">{{ t('i.page.go') }}</slot></bbutton>
   </ul>
 </template>
 <script>
 import {Page} from 'view-design'
 import bbutton from '../Button'
+import Locale from '../../mixins/locale'
 export default {
   extends: Page,
+  mixins: [Locale],
   components: {
     bbutton
   },
diff --git a/src/components/Select/index.vue b/src/components/Select/index.vue
index 41534a0abda6a33dbdbdc3d8c13bf1a655820ab0..bf7d2da17c868a61f27bc8befe38b6fd28c77301 100644
--- a/src/components/Select/index.vue
+++ b/src/components/Select/index.vue
@@ -115,9 +115,9 @@ See the Mulan PSL v2 for more details.
             v-if="isUseSelectAll"
             @click="toggleSelect">
             <template v-if="this.values.length !== this.flatOptions.length">
-              全选
+              {{ t('i.select.selectAll') }}
             </template>
-            <template v-else>取消全选</template>
+            <template v-else>{{ t('i.select.deselectAll') }}</template>
           </li>
           <functional-options
             v-if="(!remote) || (remote && !loading)"
@@ -198,6 +198,7 @@ import {
 import SelectHead from './select-head.vue'
 import Button from '../Button/index.vue'
 import SearchBar from '../SearchBar'
+import Locale from '../../mixins/locale'
 
 const ANIMATION_TIMEOUT = 300
 const prefixCls = 'ivu-select'
@@ -206,6 +207,7 @@ export default {
   extends: Select,
   // eslint-disable-next-line
   name: 'iSelect',
+  mixins: [Locale],
   components: {
     SelectHead,
     Button,
diff --git a/src/components/Table/table.vue b/src/components/Table/table.vue
index 09b6d9ce286fe733c55e851f4a61b642b499d041..4af56939977ded94bd32d1ba40b0c68eba183acd 100644
--- a/src/components/Table/table.vue
+++ b/src/components/Table/table.vue
@@ -208,6 +208,7 @@ See the Mulan PSL v2 for more details.
   </div>
 </template>
 <script>
+import Locale from '../../mixins/locale'
 import RenderCell from '../RenderCell'
 import tableBody from './table-body.vue'
 import { Table } from 'view-design'
@@ -215,6 +216,7 @@ import { isFunction } from '../../utils/type-checker'
 import _ from 'lodash'
 export default {
   name: 'Table',
+  mixins: [Locale],
   extends: Table,
   props: {
     flex: {
@@ -295,7 +297,7 @@ export default {
         return (
           <div>
             <i class="table-icon-wushuju"></i>
-            暂无数据
+            {this.t('i.table.noDataText')}
           </div>
         )
       }
diff --git a/src/components/Upload/index.vue b/src/components/Upload/index.vue
index 7f5ab5f1a35fbd5aa4e5a6c361a31b881b954d63..1698507751939c5309099e7f8807d4a348daf37e 100644
--- a/src/components/Upload/index.vue
+++ b/src/components/Upload/index.vue
@@ -31,8 +31,8 @@ See the Mulan PSL v2 for more details.
           :class="dragContentClasses">
           <div>
             <Icon custom="cmss-icon icon-shangchuan"></Icon>
-            <span :class="[prefixCls + '-content-drag-default-text-details']">拖拽文件到此处 或者</span>
-            <span :class="[prefixCls + '-content-drag-default-text-strong']">点击上传</span>
+            <span :class="[prefixCls + '-content-drag-default-text-details']">{{ t('i.upload.dragText') }}</span>
+            <span :class="[prefixCls + '-content-drag-default-text-strong']">{{ t('i.upload.clickUpload') }}</span>
           </div>
         </div>
       </slot>
@@ -53,7 +53,8 @@ See the Mulan PSL v2 for more details.
 </template>
 <script>
 // eslint-disable-next-line
-import {Upload, Icon } from 'view-design'
+import Locale from '../../mixins/locale'
+import { Upload, Icon } from 'view-design'
 import UploadList from './upload-list.vue'
 import ajax from './ajax'
 import { oneOf } from '../../utils/assist'
@@ -61,6 +62,7 @@ const prefixCls = 'ivu-upload'
 
 export default {
   extends: Upload,
+  mixins: [ Locale ],
   components: { UploadList, Icon },
   props: {
     accept: {
diff --git a/src/components/Upload/upload-list.vue b/src/components/Upload/upload-list.vue
index fa27c7325ee5e03172a54b09d6e5efd57b522c74..e4ebe6935e535bb92a98bf05fed7193ce8ceafa2 100644
--- a/src/components/Upload/upload-list.vue
+++ b/src/components/Upload/upload-list.vue
@@ -15,7 +15,7 @@ See the Mulan PSL v2 for more details.
       v-if="$parent.accept !=='' && files.length == 0"
       :class="acceptCls">
       <span :class="[prefixCls + '-accept-file-types-details']">
-        支持扩展名: {{ $parent.accept }}
+        {{ t('i.upload.extSupport') }}: {{ $parent.accept }}
       </span>
     </li>
     <template v-if=" showType !== 'drag-1'">
@@ -84,6 +84,7 @@ See the Mulan PSL v2 for more details.
   </ul>
 </template>
 <script>
+import Locale from '../../mixins/locale'
 import { Icon } from 'view-design'
 import Progress from './progress.vue'
 import TooltipText from '../TooltipText'
@@ -91,6 +92,7 @@ const prefixCls = 'ivu-upload'
 
 export default {
   name: 'UploadList',
+  mixins: [ Locale ],
   components: { Icon, Progress, TooltipText },
   props: {
     files: {
diff --git a/src/components/transfer/list.vue b/src/components/transfer/list.vue
index 6b345243354a212dfe059697c2b54ffd5e1355b0..9746a57a8a8c1d6d2426f7b457a872299754ad75 100644
--- a/src/components/transfer/list.vue
+++ b/src/components/transfer/list.vue
@@ -78,12 +78,14 @@ See the Mulan PSL v2 for more details.
   </div>
 </template>
 <script>
+import Locale from '../../mixins/locale'
 import Search from './search.vue'
 import { Checkbox } from 'view-design'
 
 export default {
   name: 'TransferList',
   components: { Search, Checkbox },
+  mixins: [ Locale ],
   props: {
     prefixCls: String,
     data: Array,
@@ -137,7 +139,7 @@ export default {
       const enabledCount = this.asTable
         ? this.data.filter(item => !item._disabled).length
         : this.data.filter(item => !item.disabled).length
-      return enabledCount === totalCount ? `（${enabledCount}项）` : `（${enabledCount}/${totalCount}项）`
+      return enabledCount === totalCount ? `（${enabledCount}${totalCount > 1 ? this.t('i.transfer.items') : this.t('i.transfer.item')}）` : `（${enabledCount}/${totalCount}${totalCount > 1 ? this.t('i.transfer.items') : this.t('i.transfer.item')}）`
     },
     checkedAll () {
       return this.filterData.filter(data => !data.disabled).length === this.validKeysCount && this.validKeysCount !== 0
diff --git a/src/index.js b/src/index.js
index 99d03b55a638199cc6a70769c366d8e2d298f694..575af068725a4d34379a8a90df863170aeef733b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -65,6 +65,7 @@ import MulCascader from './components/MulCascader'
 import Poptip from './components/Poptip/index'
 import steps from './components/Steps/index.js'
 import Cascader from './components/Cascader'
+import locale from './locale/index'
 // 引入tree
 // import VJstree from 'vue-jstree'
 // Vue.component('VJstree', VJstree)
@@ -135,6 +136,8 @@ Object.keys(iview).forEach((key) => {
 })
 
 const install = function (Vue, opts = {}) {
+  locale.use(opts.locale)
+  locale.i18n(opts.i18n)
   Object.keys(bview).forEach((key) => {
     if (!['Select', 'Option', 'OptionGroup'].includes(key)) {
       Vue.component(`b${key}`, bview[key])
@@ -324,9 +327,20 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 const API = {
   install,
+  locale: locale.use,
+  i18n: locale.i18n,
   ...bview
 }
 
+API.lang = (code) => {
+  const langObject = window['bview/locale'].default
+  if (code === langObject.i.locale) {
+    locale.use(langObject)
+  } else {
+    console.log(`The ${code} language pack is not loaded.`) // eslint-disable-line no-console
+  }
+}
+
 API.version = process.env.VERSION
 
 module.exports.default = module.exports = API
diff --git a/src/locale/index.js b/src/locale/index.js
index 59ffc1330f8786b611a8bd6dd7bbe60da1e33cac..28791f877ae503b7264460bd003cc09c482b9f9a 100644
--- a/src/locale/index.js
+++ b/src/locale/index.js
@@ -13,6 +13,7 @@ import defaultLang from './lang/zh-CN'
 import Vue from 'vue'
 import deepmerge from 'deepmerge'
 import Format from './format'
+import { locale } from 'view-design'
 
 const format = Format(Vue)
 let lang = defaultLang
@@ -50,6 +51,7 @@ export const t = function (path, options) {
 
 export const use = function (l) {
   lang = l || lang
+  locale(lang)
 }
 
 export const i18n = function (fn) {
diff --git a/src/locale/lang.js b/src/locale/lang.js
index d678b56d966e86f0255909a29f1ba695bd3e15fd..2d1aef73e27beeef85e53d4951b26365236ab402 100644
--- a/src/locale/lang.js
+++ b/src/locale/lang.js
@@ -16,11 +16,11 @@ const isServer = Vue.prototype.$isServer;
 
 export default function (lang) {
     if (!isServer) {
-        if (typeof window.iview !== 'undefined') {
-            if (!('langs' in iview)) {
-                iview.langs = {};
+        if (typeof window.bview !== 'undefined') {
+            if (!('langs' in bview)) {
+                bview.langs = {};
             }
-            iview.langs[lang.i.locale] = lang;
+            bview.langs[lang.i.locale] = lang;
         }
     }
 };
diff --git a/src/locale/lang/en-US.js b/src/locale/lang/en-US.js
index 9b986411adae37a9c7283fe4a7d4444e9249e4f2..0863a6b1abfc2392ab47b8e2ac32647a88c4694e 100644
--- a/src/locale/lang/en-US.js
+++ b/src/locale/lang/en-US.js
@@ -17,7 +17,9 @@ const lang = {
     select: {
       placeholder: 'Select',
       noMatch: 'No matching data',
-      loading: 'Loading'
+      loading: 'Loading',
+      deselectAll: 'Deselect All',
+      selectAll: 'Select All'
     },
     table: {
       noDataText: 'No Data',
@@ -80,7 +82,9 @@ const lang = {
         target: 'Target'
       },
       filterPlaceholder: 'Search here',
-      notFoundText: 'Not Found'
+      notFoundText: 'Not Found',
+      item: ' item',
+      items: ' items'
     },
     modal: {
       okText: 'OK',
@@ -100,7 +104,10 @@ const lang = {
       next5: 'Next 5 Pages',
       page: '/page',
       goto: 'Goto',
-      p: ''
+      p: '',
+      display: 'Display Per Page',
+      record: ' record',
+      go: 'Goto'
     },
     rate: {
       star: 'Star',
@@ -117,6 +124,11 @@ const lang = {
     },
     tree: {
       emptyText: 'No Data'
+    },
+    upload: {
+      clickUpload: 'click upload',
+      dragText: 'Drag files here to upload or',
+      extSupport: 'Support for file extensions'
     }
   }
 }
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index da4cb5091530fe8d0c6bbd3a0e8177a7ee3ddf83..5dd3b36f38c7eebc93b28f27ab7802dfb7578f24 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -17,7 +17,9 @@ const lang = {
     select: {
       placeholder: '请选择',
       noMatch: '无匹配数据',
-      loading: '加载中'
+      loading: '加载中',
+      deselectAll: '取消全选',
+      selectAll: '全选'
     },
     table: {
       noDataText: '暂无数据',
@@ -80,7 +82,9 @@ const lang = {
         target: '目的列表'
       },
       filterPlaceholder: '请输入搜索内容',
-      notFoundText: '列表为空'
+      notFoundText: '列表为空',
+      item: '项',
+      items: '项'
     },
     modal: {
       okText: '确定',
@@ -100,7 +104,10 @@ const lang = {
       next5: '向后 5 页',
       page: '条/页',
       goto: '跳至',
-      p: '页'
+      p: '页',
+      display: '每页显示',
+      record: '记录',
+      go: '前往'
     },
     rate: {
       star: '星',
@@ -117,6 +124,11 @@ const lang = {
     },
     tree: {
       emptyText: '暂无数据'
+    },
+    upload: {
+      clickUpload: '点击上传',
+      dragText: '拖拽文件到此处 或者',
+      extSupport: '支持扩展名'
     }
   }
 }