增加多语言配置

Author: fxss5201

package-lock.json

@@ -23,6 +23,7 @@
     "mavon-editor": "^2.7.7",
     "moment": "^2.24.0",
     "vue": "^2.6.10",
+    "vue-i18n": "^8.15.4",
     "vue-meta": "^2.3.1",
     "vue-progressbar": "^0.7.5",
     "vue-router": "^3.0.6",

package.json

@@ -75,17 +75,17 @@ export default {
         {
           index: '1',
           route: '/',
-          title: '首页'
+          title: this.$t('nav.home')
         },
         {
           index: '2',
           route: '/list',
-          title: '归档'
+          title: this.$t('nav.list')
         },
         {
           index: '3',
           route: '/about',
-          title: '关于'
+          title: this.$t('nav.about')
         }
       ],
       searchValue: '',

src/components/PageHeader.vue

@@ -0,0 +1,7 @@
+export default {
+  nav: {
+    home: 'home',
+    list: 'list',
+    about: 'about'
+  }
+}

src/language/en.js

@@ -0,0 +1,6 @@
+import zh from './zh-CN'
+import en from './en'
+export default {
+  'zh-CN': zh,
+  en
+}

src/language/index.js

@@ -0,0 +1,7 @@
+export default {
+  nav: {
+    home: '首页',
+    list: '归档',
+    about: '关于'
+  }
+}

src/language/zh-CN.js

@@ -10,6 +10,8 @@ import SkeletonCircle from './components/skeleton/circle/index.js'
 import './plugins/element.js'
 import moment from 'moment'
 import './style/common.scss'
+import VueI18n from 'vue-i18n'
+import language from './language/index.js'
 
 // console.log(process.env.VUE_APP_host)
 // console.log(process.env.VUE_APP_pathname)
@@ -24,13 +26,19 @@ const options = {
 }
 
 Vue.use(VueProgressBar, options)
+Vue.use(VueI18n)
 Vue.use(SkeletonRect)
 Vue.use(SkeletonCircle)
 
 Vue.config.productionTip = false
 Vue.prototype.$moment = moment
 Vue.prototype.$cookie = Cookies
 
+const i18n = new VueI18n({
+  locale: 'zh-CN',
+  messages: language
+})
+
 router.beforeEach((to, from, next) => {
   Vue.prototype.$message.closeAll()
   const CancelToken = Vue.axios.CancelToken
@@ -47,5 +55,6 @@ router.beforeEach((to, from, next) => {
 new Vue({
   router,
   store,
+  i18n,
   render: h => h(App)
 }).$mount('#app')