完成语言切换的学习

package.json

@@ -9,10 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "@types/node": "^20.8.7",
     "element-plus": "^2.4.1",
     "normalize.css": "^8.0.1",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.4.1",
     "vue-router": "^4.0.13",
     "vuex": "^4.0.2"
   },

src/App.vue

@@ -1,19 +1,24 @@
 <template>
-  <el-config-provider :locale="zhCn">
+  <!--  <el-config-provider :locale="zhCn">-->
+  <el-config-provider :locale="elementLocales[locale]">
     <router-view></router-view>
   </el-config-provider>
 </template>
 
 <script setup>
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import {useI18n} from "vue-i18n";
+import {elementLocales} from "@/i18n/index.js";
+const {locale} = useI18n();
+locale.value = localStorage.getItem('locale') || 'zh-cn';
 </script>
 
 
-
 <style>
 body {
   height: 100%;
 }
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -22,11 +27,13 @@ body {
   color: #2c3e50;
   margin-top: 60px;
 }
+
 .flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .cursor {
   cursor: pointer;
 }

src/i18n/index.js

@@ -0,0 +1,21 @@
+import { createI18n } from 'vue-i18n'
+import localZhCn from './language/zh-cn.js'
+import localEn from './language/en.js'
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import en from "element-plus/es/locale/lang/en"
+
+const i18n = createI18n({
+    legacy: false,
+    locale: 'zh-cn',
+    fallbackLocale: 'zhn-cn',
+    messages: {
+        'zh-cn': localZhCn,
+        'en': localEn,
+    }
+})
+export default i18n
+
+export const elementLocales = {
+    'zh-cn': zhCn,
+    en
+}

src/i18n/language/en.js

@@ -0,0 +1,6 @@
+export default {
+    sitename: "PM System",
+    personnalCenter: "Personal Center",
+    login: "Login",
+    logout: "Exit",
+}

src/i18n/language/zh-cn.js

@@ -0,0 +1,6 @@
+export default {
+    sitename: "权限管理系统",
+    personnalCenter: "个人中心",
+    login: "登录",
+    logout: "退出",
+}

src/layout/components/PageHeader.vue

@@ -2,35 +2,62 @@
   <div class="header-cont">
     <div class="left">
       <h1>
-        <router-link to="/">权限管理系统</router-link>
+        <router-link to="/">{{ t('sitename') }}</router-link>
       </h1>
     </div>
     <div class="right flex-center">
       <div class="lang gap">
-        <span class="item active">简体中文</span> /
-        <span class="item">En</span>
+        <span
+            class="item"
+            :class="{active: locale === 'zh-cn'}"
+            @click="changeLanguage('zh-cn')"
+        >简体中文</span> /
+        <span
+            class="item"
+            :class="{active: locale === 'en'}"
+            @click="changeLanguage('en')"
+        >En</span>
       </div>
+      <template v-if="isLogin">
         <div class="gap cursor">
           <router-link to="/personal/message"><el-icon><message/></el-icon></router-link>
         </div>
         <el-dropdown trigger="click">
           <div class="flex-center cursor">
-          这里是用户名
+            {{ username }}
             <el-icon><caret-bottom /></el-icon>
           </div>
           <template #dropdown>
             <el-dropdown-menu>
-            <el-dropdown-item>个人中心</el-dropdown-item>
-            <el-dropdown-item>退出</el-dropdown-item>
+              <el-dropdown-item>{{ t('personnalCenter') }}</el-dropdown-item>
+              <el-dropdown-item>{{ t('logout') }}</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
+      </template>
+      <template v-else-if="route.name !== 'Login'">
+        <router-link to="/Login">{{t('login')}}</router-link>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup>
-import Message from "@/views/personal/Message.vue";
+import {Message} from '@element-plus/icons-vue'
+import {useI18n} from "vue-i18n";
+import {ref} from 'vue';
+import {useRoute} from "vue-router";
+
+const route = useRoute();
+const {locale, t} = useI18n();
+function changeLanguage(lang) {
+  locale.value = lang
+  localStorage.setItem('locale', lang)
+}
+const isLogin = ref(false);
+const username = ref('admin');
+isLogin.value = true;
+
 </script>
 
 <style lang="scss">

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router/index.js";
 import store from "./store/index.js";
+import i18n from "./i18n/index.js";
 import * as ElIcons from "@element-plus/icons-vue";
 import 'normalize.css/normalize.css'
 
@@ -11,4 +12,4 @@ for (const name in ElIcons){
     app.component(name, ElIcons[name]);
 }
 
-app.use(router).use(store).mount('#app')
+app.use(router).use(store).use(i18n).mount('#app')

src/router/index.js

@@ -31,7 +31,7 @@ const routes = [
                         meta: {
                             requireAuth: true,
                         },
-                        component: () => import("@/views/personal/Message.vue")
+                        component: () => import("@/views/personal/PersonalMessage.vue")
                     }
                 ]
             },

src/views/personal/Message.vue

@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <h1>这是个人中心消息页面</h1>
-</template>
-
-<style scoped>
-
-</style>

src/views/personal/PersonalMessage.vue

@@ -0,0 +1,15 @@
+<template>
+  <h1>这是个人中心消息页面-{{t('sitename')}}</h1>
+  <el-pagination :page-size="100" layout="total, prev, pager, next" :total="1000"></el-pagination>
+</template>
+
+<script setup>
+import {useI18n} from "vue-i18n";
+
+const {locale ,t} = useI18n();
+
+</script>
+
+<style scoped>
+
+</style>

yarn.lock

@@ -17,7 +17,7 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
-"@element-plus/icons-vue@^2.0.6":
+"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a"
   integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==
@@ -152,6 +152,27 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
+"@intlify/core-base@9.4.1":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.4.1.tgz#5ab9b624a34af2299a9b45aa331b6516c169b8b5"
+  integrity sha512-WIwx+elsZbxSMxRG5+LC+utRohFvmZMoDevfKOfnYMLbpCjCSavqTfHJAtfsY6ruowzqXeKkeLhRHbYbjoJx5g==
+  dependencies:
+    "@intlify/message-compiler" "9.4.1"
+    "@intlify/shared" "9.4.1"
+
+"@intlify/message-compiler@9.4.1":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.4.1.tgz#aa00629a455e23cece3464293834a02994b4fb04"
+  integrity sha512-aN2N+dUx320108QhH51Ycd2LEpZ+NKbzyQ2kjjhqMcxhHdxtOnkgdx+MDBhOy/CObwBmhC3Nygzc6hNlfKvPNw==
+  dependencies:
+    "@intlify/shared" "9.4.1"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@9.4.1":
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.4.1.tgz#bd0d221aaac476b6778a10ddcd0472f812c64e27"
+  integrity sha512-A51elBmZWf1FS80inf/32diO9DeXoqg9GR9aUDHFcfHoNDuT46Q+fpPOdj8jiJnSHSBh8E1E+6qWRhAZXdK3Ng==
+
 "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
@@ -268,7 +289,7 @@
     "@vue/compiler-dom" "3.3.4"
     "@vue/shared" "3.3.4"
 
-"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11":
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.1.tgz#7f71f31e40973eeee65b9a64382b13593fdbd697"
   integrity sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
@@ -850,6 +871,15 @@ vue-demi@*:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
   integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
 
+vue-i18n@^9.4.1:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.4.1.tgz#c7402662fe9b40b17798afffa9d8bfa4734dd7f5"
+  integrity sha512-vnQyYE9LBuNOqPpETIcCaGnAyLEqfeIvDcyZ9T+WBCWFTqWw1J8FuF1jfeDwpHBi5JKgAwgXyq1mt8jp/x/GPA==
+  dependencies:
+    "@intlify/core-base" "9.4.1"
+    "@intlify/shared" "9.4.1"
+    "@vue/devtools-api" "^6.5.0"
+
 vue-router@^4.0.13:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.13.tgz#47f06e2f8ff6120bfff3c27ade1356cc9de7d870"