feat: 单独抽离vue-i18n

src/app.js

@@ -1,7 +1,5 @@
 import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-import en from './assets/language/en'
-import zh from './assets/language/zh'
+import i18n from '@/language'
 
 import 'element-ui/lib/theme-chalk/index.css'
 import './scss/index.scss'
@@ -42,16 +40,6 @@ export default async function startApp (keycloak, auth) {
   }
   Vue.use(Element)
 
-  // 多语言配置
-  Vue.use(VueI18n)
-  const i18n = new VueI18n({
-    locale: 'en',
-    messages: {
-      zh, // 中文
-      en // 英文
-    }
-  })
-
   Vue.config.productionTip = false
   Vue.config.errorHandler = err => {
     closeLoading()

src/assets/language/en.js

@@ -1,7 +0,0 @@
-const en = {
-    lang: "English",
-    home: {
-        title: "test English"
-    }
-}
-export default en

src/assets/language/zh.js

@@ -1,7 +0,0 @@
-const zh = {
-    lang: "中文",
-    home: {
-        title: "测试中文"
-    }
-}
-export default zh

src/language/en.js

@@ -0,0 +1,8 @@
+const en = {
+  lang: 'English',
+  home: {
+    title: 'test English'
+  },
+  '首页': 'Home'
+}
+export default en

src/language/index.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+// 从语言包文件中导入语言包对象
+import zh from './zh'
+import en from './en'
+
+Vue.use(VueI18n)
+
+const messages = {
+  zh,
+  en
+}
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+// locale.i18n((key, value) => i18n.t(key, value))
+export default i18n

src/language/zh.js

@@ -0,0 +1,7 @@
+const zh = {
+  lang: '中文',
+  home: {
+    title: '测试中文'
+  }
+}
+export default zh

src/router/index.js

@@ -10,6 +10,7 @@ import {
 } from '@/constant'
 import Layout from '@/layout'
 import Solo from '@/layout/Solo'
+import i18n from '@/language'
 
 Vue.use(Router)
 
@@ -50,7 +51,7 @@ export const asyncRoutes = [
     path: '/',
     redirect: '/home',
     component: Layout,
-    meta: { title: '首页', icon: 'home' },
+    meta: { title: i18n.t('首页'), icon: 'home' },
     children: [
       {
         path: 'home',

src/store/modules/permission.js

@@ -40,7 +40,7 @@ const mutations = {
 const actions = {
   generateRoutes ({ commit, rootGetters }) {
     commit('SET_ROUTES', constantRoutes.concat(
-      __DEV__ && rootGetters.isSuperAdmin
+      __DEV__ || rootGetters.isSuperAdmin
         ? asyncRoutes
         : filterAsyncRoutes(asyncRoutes, rootGetters.access)
     ))

src/views/dashboard/Dashboard.vue

@@ -16,6 +16,13 @@
       :status="status"
       :total="total"
     />
+    <div>{{ $t('home.title') }}</div>
+    <div @click="toZh">
+      中文
+    </div>
+    <div @click="toEN">
+      英文
+    </div>
   </wrapper>
 </template>
 
@@ -46,6 +53,14 @@ export default {
     ScreenshotCache.clear()
   },
   methods: {
+    toZh () {
+      console.log('中文')
+      this.$i18n.locale = 'zh'
+    },
+    toEN () {
+      console.log('英文')
+      this.$i18n.locale = 'en'
+    },
     onGroupChange (path) {
       this.total = -1
       this.path = path