i18n延迟加载

frontend/src/i18n.js

@@ -0,0 +1,42 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+import zh from '@/lang/zh'
+
+let loadedLocales = ['zh']
+
+Vue.use(VueI18n)
+
+export async function setLocale(locale) {
+  if (loadedLocales.indexOf(locale) === -1) {
+    // eslint-disable-next-line prefer-template
+    let langModule = await import('@/lang/' + locale)
+    i18n.setLocaleMessage(locale, langModule.default)
+    loadedLocales.push(locale)
+  }
+  window.localStorage.lang = i18n.locale = locale
+}
+
+export const i18n = new VueI18n({
+  locale: 'zh',
+  fallbackLocale: 'zh',
+  messages: {
+    zh
+  }
+})
+
+function getDefaultLocale() {
+  let locale = window.localStorage.lang
+  if (!locale) {
+    let lang = navigator.language
+    if (lang.startsWith('zh')) {
+      locale = 'zh'
+    } else if (lang.startsWith('ja')) {
+      locale = 'ja'
+    } else {
+      locale = 'en'
+    }
+  }
+  return locale
+}
+setLocale(getDefaultLocale())

frontend/src/layout/Sidebar.vue

@@ -30,24 +30,31 @@
         <template slot="title">
           <i class="el-icon-chat-line-square"></i>Language
         </template>
-        <el-menu-item v-for="{ locale, name } in [
-            { locale: 'zh', name: '中文' },
-            { locale: 'ja', name: '日本語' },
-            { locale: 'en', name: 'English' }
-          ]"
-          :key="locale" @click="onSelectLanguage(locale)"
-        >{{ name }}</el-menu-item>
+        <el-menu-item v-for="locale in LOCALES" :key="locale.locale" @click="onSelectLanguage(locale.locale)">
+          <template>{{ locale.name }}</template>
+        </el-menu-item>
       </el-submenu>
     </el-menu>
   </el-scrollbar>
 </template>
 
 <script>
+import * as i18n from '@/i18n'
+
 export default {
   name: 'Sidebar',
+  data() {
+    return {
+      LOCALES: [
+        { locale: 'zh', name: '中文' },
+        { locale: 'ja', name: '日本語' },
+        { locale: 'en', name: 'English' }
+      ]
+    }
+  },
   methods: {
     onSelectLanguage(locale) {
-      window.localStorage.lang = this.$i18n.locale = locale
+      i18n.setLocale(locale)
     }
   }
 }

frontend/src/layout/index.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import Sidebar from './Sidebar.vue'
+import Sidebar from './Sidebar'
 
 export default {
   name: 'Layout',

frontend/src/main.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import VueI18n from 'vue-i18n'
 import {
   Aside, Autocomplete, Badge, Button, Card, Col, ColorPicker, Container, Divider, Form, FormItem, Image,
   Input, Main, Menu, MenuItem, Message, Option, OptionGroup, Radio, RadioGroup, Row, Select, Scrollbar,
@@ -8,17 +7,14 @@ import {
 } from 'element-ui'
 import axios from 'axios'
 
-import App from './App.vue'
+import { i18n } from './i18n'
+import App from './App'
 import Layout from './layout'
-import Home from './views/Home.vue'
+import Home from './views/Home'
 import StyleGenerator from './views/StyleGenerator'
 import Help from './views/Help'
-import Room from './views/Room.vue'
-import NotFound from './views/NotFound.vue'
-
-import zh from './lang/zh'
-import ja from './lang/ja'
-import en from './lang/en'
+import Room from './views/Room'
+import NotFound from './views/NotFound'
 
 if (process.env.NODE_ENV === 'development') {
   // 开发时使用localhost:12450
@@ -27,7 +23,6 @@ if (process.env.NODE_ENV === 'development') {
 axios.defaults.timeout = 10 * 1000
 
 Vue.use(VueRouter)
-Vue.use(VueI18n)
 // 初始化element
 Vue.use(Aside)
 Vue.use(Autocomplete)
@@ -93,25 +88,6 @@ const router = new VueRouter({
   ]
 })
 
-let locale = window.localStorage.lang
-if (!locale) {
-  let lang = navigator.language
-  if (lang.startsWith('zh')) {
-    locale = 'zh'
-  } else if (lang.startsWith('ja')) {
-    locale = 'ja'
-  } else {
-    locale = 'en'
-  }
-}
-const i18n = new VueI18n({
-  locale,
-  fallbackLocale: 'en',
-  messages: {
-    zh, ja, en
-  }
-})
-
 new Vue({
   render: h => h(App),
   router,