add vue-i18n config

package.json

@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "description": "Vue 2.0 admin management system template based on iView",
   "author": "lison<zhigang.li@tendcloud.com>",
-  "private": true,
+  "private": false,
   "scripts": {
     "dev": "webpack-dev-server --inline --open --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",

src/locale/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import customZhCn from './lang/zh-CN'
+import customZhTw from './lang/zh-TW'
+import customEnUs from './lang/en-US'
+import zhCnLocale from 'iview/src/locale/lang/zh-CN'
+import enUsLocale from 'iview/src/locale/lang/en-US'
+import zhTwLocale from 'iview/src/locale/lang/zh-TW'
+
+Vue.use(VueI18n)
+
+// 自动根据浏览器系统语言设置语言
+const navLang = navigator.language
+const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
+const lang = window.localStorage.lang || localLang || 'zh-CN'
+
+Vue.config.lang = lang
+Vue.locale = () => {}
+
+const messages = {
+  zhCn: Object.assign(zhCnLocale, customZhCn),
+  zhTw: Object.assign(zhTwLocale, customZhTw),
+  enUs: Object.assign(enUsLocale, customEnUs)
+}
+
+const i18n = new VueI18n({
+  locale: lang,
+  messages
+})
+
+export default i18n

src/locale/lang/en-US.js

@@ -0,0 +1,16 @@
+export default {
+  home: 'home',
+  switchLangTitle: 'Switch Lang',
+  international: 'Switch Lang',
+  tip: 'Note: iview-admin just to demonstrate how to achieve multi-language switching, so only the current page to do the translation.',
+  iviewComponentTitle: 'The effect on the iview',
+  intro: 'iview currently supports 15 languages, as long as you see the iview component where the text will be based on your language type automatically set the corresponding language.',
+  placeholderText: 'please enter text...',
+  placeholderDate: 'Select Date',
+  name: 'name',
+  company: 'company',
+  btnText: 'Click to show modal',
+  modalText: 'Here you can see the iview modal box by default to the OK and Cancel buttons that will switch the language',
+  poptip: 'international poptip',
+  showPoptipText: 'Click to show poptip'
+}

src/locale/lang/zh-CN.js

@@ -0,0 +1,16 @@
+export default {
+  home: '首页',
+  switchLangTitle: '切换语言',
+  international: '多语言切换',
+  iviewComponentTitle: 'iview组件多语言切换',
+  tip: '注：iview-admin只是为了示范如何实现多语言切换，所以只对当前页做了翻译。',
+  intro: 'iview目前支持15种语言，只要你看得到的iview组件出现iview内置文字的地方都会根据你设置的语言类型自动切换对应的语言。',
+  placeholderText: '请输入文字...',
+  placeholderDate: '选择日期',
+  name: '姓名',
+  company: '公司',
+  btnText: '点击查看模态框',
+  modalText: '在这里你可以看到iview模态框默认的确定和取消按钮会切换语言',
+  poptip: '国际化的气泡提示',
+  showPoptipText: '点击显示气泡提示'
+}

src/locale/lang/zh-TW.js

@@ -0,0 +1,16 @@
+export default {
+  home: '首頁',
+  switchLangTitle: '切換語言',
+  international: '多語言切換',
+  iviewComponentTitle: 'iview組件多語言切換',
+  tip: '注：iview-admin只是為了示範如何實現多語言切換，所以只對當前頁做了翻譯。',
+  intro: 'iview目前支持15種語言，只要你看得到的iview組件出現iview內置文字的地方都會根據你設置的語言類型自動切換對應的語言。',
+  placeholderText: '請輸入文字...',
+  placeholderDate: '選擇日期',
+  name: '姓名',
+  company: '公司',
+  btnText: '點擊查看模態框',
+  modalText: '在這裡你可以看到iview模態框默認的確定和取消按鈕會切換語言',
+  poptip: '國際化的氣泡提示',
+  showPoptipText: '點擊顯示氣泡提示'
+}

src/main.js

@@ -5,10 +5,9 @@ import App from './App'
 import router from './router'
 import store from './store'
 import iView from 'iview'
-import VueI18n from 'vue-i18n'
+import i18n from '@/locale'
 import 'iview/dist/styles/iview.css'
 
-Vue.use(VueI18n)
 Vue.use(iView)
 Vue.config.productionTip = false
 
@@ -17,6 +16,7 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   render: h => h(App),
   template: '<App/>'
 })