添加vue-i18n依赖，添加中文、英语、老挝语言包

package.json

@@ -1,11 +1,11 @@
 {
   "name": "coin-web",
   "version": "4.8.2",
-  "description": "老挝支付金控管理系统",
+  "description": "老挝金融支付管理系统",
   "author": "LionLi",
   "license": "MIT",
   "scripts": {
-    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src"
@@ -54,6 +54,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-i18n": "^8.28.2",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",

src/components/LanguageSelect/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-tooltip content="语言切换" effect="dark" placement="bottom">
+    <el-dropdown trigger="click" @command="handleSetLanguage">
+      <div class="language-select right-menu-item hover-effect">
+        <svg-icon icon-class="language" />
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="zh" :disabled="$i18n.locale === 'zh'">中文</el-dropdown-item>
+        <el-dropdown-item command="en" :disabled="$i18n.locale === 'en'">English</el-dropdown-item>
+        <el-dropdown-item command="la" :disabled="$i18n.locale === 'la'">ລາວ</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'LanguageSelect',
+  methods: {
+    handleSetLanguage(lang) {
+      this.$i18n.locale = lang
+      localStorage.setItem('language', lang)
+      this.$message.success(this.$t('language.switchSuccess'))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.language-select {
+  padding: 0 8px;
+  height: 100%;
+  font-size: 18px;
+  color: #5a5e66;
+  vertical-align: text-bottom;
+
+  &:hover {
+    background: rgba(0, 0, 0, .025);
+  }
+}
+</style>

src/languages/en.js

@@ -0,0 +1,11 @@
+export default {
+  language: {
+    switchSuccess: 'Switch language successfully'
+  },
+  navbar: {
+    logout: 'Logout'
+  },
+  index: {
+    title: 'Laos Payment Financial Management System'
+  },
+}

src/languages/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import zh from './zh'
+import en from './en'
+import la from './laos'
+
+Vue.use(VueI18n)
+
+const messages = {
+  zh,
+  en,
+  la
+}
+
+export default new VueI18n({
+  locale: localStorage.getItem('language') || 'zh',
+  fallbackLocale: 'zh',
+  messages
+})

src/languages/laos.js

@@ -0,0 +1,11 @@
+export default {
+  language: {
+    switchSuccess: 'ປ່ຽນພາສາສຳເລັດ'
+  },
+  navbar: {
+    logout: 'ອອກຈາກລະບົບ'
+  },
+  index: {
+    title: 'ລະບົບຈັດການການເງິນການຈ່າຍເງິນລາວ'
+  },
+}

src/languages/zh.js

@@ -0,0 +1,11 @@
+export default {
+  language: {
+    switchSuccess: '语言切换成功'
+  },
+  navbar: {
+    logout: '退出登录'
+  },
+  index: {
+    title: '老挝支付金控管理系统'
+  },
+}

src/layout/components/Navbar.vue

@@ -23,6 +23,10 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
+        <el-tooltip content="语言切换" effect="dark" placement="bottom">
+          <language-select id="language-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+     
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
@@ -53,6 +57,7 @@ import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
+import LanguageSelect from '@/components/LanguageSelect'
 import Search from '@/components/HeaderSearch'
 import RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
@@ -64,6 +69,7 @@ export default {
     Hamburger,
     Screenfull,
     SizeSelect,
+    LanguageSelect,
     Search,
     RuoYiGit,
     RuoYiDoc

src/main.js

@@ -82,9 +82,12 @@ Vue.use(Element, {
 
 Vue.config.productionTip = false
 
+import i18n from './languages'
+
 new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   render: h => h(App)
 })