添加多语言示例页，支持自定义指定首页

package-lock.json

@@ -8255,24 +8255,24 @@
       "dev": true
     },
     "iview": {
-      "version": "3.0.0",
+      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/iview/-/iview-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/iview/-/iview-3.1.3.tgz",
-      "integrity": "sha512-9PnDxVGXDLUyx9KAPX4UJnqa3M2PA6HEGESd5sz4setgGBAAYTgPjho+87vvbLWjVxYnAzwtu1FuONWORP9IGA==",
+      "integrity": "sha512-ZCYJ8orejCnOkwOU2tVWGYVpXeLW1qzkuMkV+BKMvprYEO936MQHg+f4pcqFY83PX/ybTk3YnURq6/k1VJc5+w==",
       "requires": {
         "async-validator": "1.8.2",
-        "deepmerge": "2.1.1",
+        "deepmerge": "2.2.1",
         "element-resize-detector": "1.1.14",
         "js-calendar": "1.2.3",
         "lodash.throttle": "4.1.1",
         "popper.js": "1.14.3",
         "tinycolor2": "1.4.1",
-        "v-click-outside-x": "3.0.3"
+        "v-click-outside-x": "3.3.0"
       },
       "dependencies": {
         "deepmerge": {
-          "version": "2.1.1",
+          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-          "integrity": "sha512-urQxA1smbLZ2cBbXbaYObM1dJ82aJ2H57A1C/Kklfh/ZN1bgH4G/n5KWhdNfOK11W98gqZfyYj7W4frJJRwA2w=="
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
         }
       }
     },
@@ -14151,9 +14151,9 @@
       "dev": true
     },
     "v-click-outside-x": {
-      "version": "3.0.3",
+      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-3.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-3.3.0.tgz",
-      "integrity": "sha512-3nPkT+rOsLyy1qkDRp3nAY0a9gXlhKlCaqs5dGAZa5oUe3h5+VOUmkKh9zyGiakQ2kDZriqOUx3YNaUjJVVsjg=="
+      "integrity": "sha512-NSro9Tz0wTh9K2g+jxRg6Uz+X/EleBA7mU4Usfk9d/UQHfn+zk/AfZ0KHhHqkaOLOZgm9HglvuRElKrwhsWBHA=="
     },
     "validate-npm-package-license": {
       "version": "3.0.3",

package.json

@@ -18,7 +18,7 @@
     "cropperjs": "^1.2.2",
     "echarts": "^4.0.4",
     "html2canvas": "^1.0.0-alpha.12",
-    "iview": "^3.0.0",
+    "iview": "^3.1.3",
     "iview-area": "^1.5.17",
     "js-cookie": "^2.2.0",
     "simplemde": "^1.11.2",

src/config/index.js

@@ -8,12 +8,16 @@ export default {
    *              如果不使用，则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'}
    *              用来在菜单中显示文字
    */
-  useI18n: false,
+  useI18n: true,
   /**
    * @description api请求基础路径
    */
   baseUrl: {
     dev: 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/',
     pro: 'https://produce.com'
-  }
+  },
+  /**
+   * @description 默认打开的首页的路由name值，默认为home
+   */
+  homeName: 'home'
 }

src/libs/util.js

@@ -100,7 +100,7 @@ export const getTagNavListFromLocalstorage = () => {
  * @param {Array} routers 路由列表数组
  * @description 用于找到路由列表中name为home的对象
  */
-export const getHomeRoute = routers => {
+export const getHomeRoute = (routers, homeName = 'home') => {
   let i = -1
   let len = routers.length
   let homeRoute = {}
@@ -110,7 +110,7 @@ export const getHomeRoute = routers => {
       let res = getHomeRoute(item.children)
       if (res.name) return res
     } else {
-      if (item.name === 'home') homeRoute = item
+      if (item.name === homeName) homeRoute = item
     }
   }
   return homeRoute
@@ -320,3 +320,11 @@ export const routeHasExist = (tagNavList, routeItem) => {
   })
   return res
 }
+
+export const localSave = (key, value) => {
+  localStorage.setItem(key, value)
+}
+
+export const localRead = (key) => {
+  return localStorage.getItem(key) || ''
+}

src/locale/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
+import { localRead } from '@/libs/util'
 import customZhCn from './lang/zh-CN'
 import customZhTw from './lang/zh-TW'
 import customEnUs from './lang/en-US'
@@ -12,7 +13,7 @@ Vue.use(VueI18n)
 // 自动根据浏览器系统语言设置语言
 const navLang = navigator.language
 const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
-let lang = window.localStorage.lang || localLang || 'zh-CN'
+let lang = localLang || localRead('local') || 'zh-CN'
 
 Vue.config.lang = lang
 

src/locale/lang/en-US.js

@@ -1,4 +1,5 @@
 export default {
+  home: 'Home',
   components: 'Components',
   count_to_page: 'Count-to',
   tables_page: 'Table',
@@ -16,5 +17,15 @@ export default {
   directive_page: 'Directive',
   level_1: 'level-1',
   level_2: 'level-2',
-  level_2_1: 'level-2-1'
+  level_2_1: 'level-2-1',
+  excel: 'Excel',
+  'upload-excel': 'Upload Excel',
+  'export-excel': 'Export Excel',
+  tools_methods_page: 'Tools Methods',
+  drag_list_page: 'Drag-list',
+  i18n_page: 'Internationalization',
+  modalTitle: 'Modal Title',
+  content: 'This is the modal box content.',
+  buttonText: 'Show Modal',
+  'i18n-tip': 'Note: Only this page is multi-language, other pages do not add language content to the multi-language package.'
 }

src/locale/lang/zh-CN.js

@@ -1,4 +1,5 @@
 export default {
+  home: '首页',
   components: '组件',
   count_to_page: '数字渐变',
   tables_page: '多功能表格',
@@ -16,5 +17,15 @@ export default {
   directive_page: '指令',
   level_1: 'level-1',
   level_2: 'level-2',
-  level_2_1: 'level-2-1'
+  level_2_1: 'level-2-1',
+  excel: 'Excel',
+  'upload-excel': '上传excel',
+  'export-excel': '导出excel',
+  tools_methods_page: '工具函数',
+  drag_list_page: '拖拽列表',
+  i18n_page: '多语言',
+  modalTitle: '模态框题目',
+  content: '这是模态框内容',
+  buttonText: '显示模态框',
+  'i18n-tip': '注：仅此页做了多语言，其他页面没有在多语言包中添加语言内容'
 }

src/locale/lang/zh-TW.js

@@ -1,4 +1,5 @@
 export default {
+  home: '首頁',
   components: '组件',
   count_to_page: '数字渐变',
   tables_page: '多功能表格',
@@ -16,5 +17,15 @@ export default {
   directive_page: '指令',
   level_1: 'level-1',
   level_2: 'level-2',
-  level_2_1: 'level-2-1'
+  level_2_1: 'level-2-1',
+  excel: 'Excel',
+  'upload-excel': '上傳excel',
+  'export-excel': '導出excel',
+  tools_methods_page: '工具函數',
+  drag_list_page: '拖拽列表',
+  i18n_page: '多語言',
+  modalTitle: '模態框題目',
+  content: '這是模態框內容',
+  buttonText: '顯示模態框',
+  'i18n-tip': '注：僅此頁做了多語言，其他頁面沒有在多語言包中添加語言內容'
 }

src/router/routers.js

@@ -38,7 +38,8 @@ export default [
         meta: {
           hideInMenu: true,
           title: '首页',
-          notCache: true
+          notCache: true,
+          icon: 'md-home'
         },
         component: () => import('@/view/single-page/home')
       }
@@ -221,6 +222,25 @@ export default [
       }
     ]
   },
+  {
+    path: '/i18n',
+    name: 'i18n',
+    meta: {
+      hide: true
+    },
+    component: Main,
+    children: [
+      {
+        path: 'i18n_page',
+        name: 'i18n_page',
+        meta: {
+          icon: 'md-planet',
+          title: '指令'
+        },
+        component: () => import('@/view/i18n/i18n-page.vue')
+      }
+    ]
+  },
   {
     path: '/directive',
     name: 'directive',

src/store/module/app.js

@@ -7,11 +7,15 @@ import {
   getNextRoute,
   routeHasExist,
   routeEqual,
-  getRouteTitleHandled
+  getRouteTitleHandled,
+  localSave,
+  localRead
 } from '@/libs/util'
 import beforeClose from '@/router/before-close'
 import router from '@/router'
 import routers from '@/router/routers'
+import config from '@/config'
+const { homeName } = config
 
 const closePage = (state, route) => {
   const nextRoute = getNextRoute(state.tagNavList, route)
@@ -25,8 +29,8 @@ export default {
   state: {
     breadCrumbList: [],
     tagNavList: [],
-    homeRoute: getHomeRoute(routers),
+    homeRoute: getHomeRoute(routers, homeName),
-    local: ''
+    local: localRead('local')
   },
   getters: {
     menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access)
@@ -67,6 +71,7 @@ export default {
       }
     },
     setLocal (state, lang) {
+      localSave('local', lang)
       state.local = lang
     }
   }

src/view/i18n/i18n-page.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <Row :gutter="10">
+      <i-col span="6">
+        <Card>
+          <div class="i18n-card-box">
+            <DatePicker type="date" placeholder="Select date"></DatePicker>
+            <TimePicker type="timerange" placement="bottom-end" placeholder="Select time" style="display: block;margin-top: 10px;"></TimePicker>
+            <Button type="primary" @click="modalVisible = true" style="margin-top: 10px;">{{ $t('buttonText') }}</Button>
+            <Modal
+                v-model="modalVisible"
+                :title="$t('modalTitle')">
+                <p>{{ content }}</p>
+                <p>{{ content }}</p>
+                <p>{{ content }}</p>
+            </Modal>
+            <i class="tip">{{ $t('i18n-tip') }}</i>
+          </div>
+        </Card>
+      </i-col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'i18n_page',
+  data () {
+    return {
+      modalVisible: false
+    }
+  },
+  computed: {
+    content () {
+      return this.$t('content')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.i18n-card-box{
+  height: 200px;
+  .tip{
+    color: gray;
+    display: block;
+    margin-top: 20px;
+  }
+}
+</style>

vue.config.js

@@ -32,7 +32,6 @@ module.exports = {
     config.resolve.alias
       .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
       .set('_c', resolve('src/components'))
-      .set('_conf', resolve('config'))
   },
   // 打包时不生成.map文件
   productionSourceMap: false