实现多语言配置的 Vue 3 项目

竭点

于 2024-07-03 15:55:52 发布

阅读量517

点赞数 10

分类专栏： Vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/paper_umbrella/article/details/140153977

版权

Vue3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在 Vue 3 项目中，通过使用vue-i18n 库可以方便地实现多语言配置，为用户提供多语言支持的界面体验。在本篇博客中，我将向您介绍如何在 Vue 3 项目中配置和使用多语言功能，让您的应用能够支持多种语言。让你的开发起来更加简单。

步骤一：安装 vue-i18n

首先，在您的 Vue 3 项目中安装vue-i18n 库。您可以通过以下命令来安装：

npm install vue-i18n@next

步骤二：创建语言文件

在src下创建一个语言文件夹，用来存放语言配置文件（en.js，zh.js,i18n.js）三个文件，我这个项目只需要中英文，现在做一个简单使用示例
在这里插入图片描述
具体的文件：
en.js:(英文翻译文件夹)

//en
export default {
  message: {
   home: 'home'
  }
}

zh.js:（中文）

export default {
  message: {
   home: '首页'
  }
}

i18n.js:

import { createI18n } from "vue-i18n";
import en from './en'
import zh from './zh';
 
const i18n = createI18n({
  locale:localStorage.getItem('language') || 'zh', // 默认是中文
  globalInjection:true,//全局配置$t
  legacy:false,
  messages:{en,zh}// 需要做国际化的语种
 
})
 
export default i18n

然后在main.js里头配置全局的语言
main.js:

import './assets/main.css'

import { createApp } from 'vue'
import pinia from '@/stores/index.js'

import App from './App.vue'
import router from './router'
import i18n from './lang/i18n';

const app = createApp(App) 
app.use(router)
app.use(pinia)
app.use(i18n)

app.mount('#app')

配置好这些以后就可以使用了：
切换中英文的文件：

<template>
    <div class="entry_box">
      <div class="entry_head">
        <button @click="changeLocale">{{ currentLocale === 'en' ? 'Switch to Chinese' : '切换英文' }}</button>
      </div>
      <div class="entry_main">
        <div class="menu">
          <Menu/>
        </div>
        <div class="main">
          <router-view>
          </router-view>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { ref } from 'vue';
  import Menu from '@/components/Menu.vue'
  import { useI18n } from 'vue-i18n';
  const { locale, t } = useI18n();
  locale.value = 'zh';
  const currentLocale = ref(locale.value);
  const changeLocale = () => {
    currentLocale.value = currentLocale.value === 'zh' ? 'en' : 'zh';
    locale.value = currentLocale.value;
  };
  </script>
  <style scoped lang="less">
  .entry_box{
    height: 100%;
    width: 100%;
    .entry_head{
      height: 64px;
      width: 100%;
      display: flex;
      background: #409eff;
    }
    .entry_main{
      width: 100%;
      height: calc(100vh - 64px);
      display: flex;
      .menu{
        width: 1;
        height: calc(100vh - 64px);
      }
      .main{
        padding: 10px;
        flex: 1;
        height: calc(100vh - 64px);
      }
    }
  }
  
  </style>

在菜单配置项里头做语言切换的监听

<template>
  <div class="menu_box">
    <el-menu
      active-text-color="#d71921"
      background-color="#fff"
      class="el-menu-vertical-gat"
      :default-active="defaultActive"
      text-color="#040c2c"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      ref="menuRef"
    >
      <template v-for="item in menuData" :key="item.index">
        <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.index">
          <template #title>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="citem in item.children" :index="citem.index" :key="citem.index" @click="changeMenu(citem)">
            {{ citem.title }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.index" @click="changeMenu(item)">
          <el-icon><component :is="item.icon"></component></el-icon>
          <span>{{ item.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, markRaw, onUpdated } from 'vue';
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'
  const { locale, t } = useI18n();
  const router = useRouter()
  const defaultActive = ref('1');
  const isCollapse = ref(false);
  const menuRef = ref(null);
  const menuData = ref([]);

  const initMenuData = () => {
    menuData.value = [
      {
        index: '1',
        title: t('message.home'),
        name: 'home',
        icon: markRaw(Location)
      },
      {
        index: '2',
        title: '系统管理',
        name: 'systemManagement',
        icon: markRaw(Setting),
        
      },
      {
        index: '3',
        title: '网关配置',
        name: 'equipmentConfig',
        icon: markRaw(IconMenu)
      },
      {
        index: '4',
        title: '日志管理',
        name: 'logManagement',
        icon: markRaw(Document)
      }
    ];
  }
  // 监听语言变化，并重新初始化菜单数据
  watch(locale, () => {
    initMenuData();
  });
  // 初始化菜单数据
  initMenuData();
  const setCollapseState = (windowWidth) => {
    if (windowWidth < 768) {
      isCollapse.value = true;
    } else {
      isCollapse.value = false;
    }
  }

  const handleOpen = (key, keyPath) => {
    if(menuRef&&menuData){
          for(let i=0;i<menuData.length;i++){
            let menu = menuData[i];
            if(menu.index!=key&&menu.children&&menu.children.length>0){
              //关闭其他sub-menu
              menuRef.close(menu.index);
            }
          }
        }

    // if (key !== defaultActive.value && menuData.value) {
    //   menuData.value.forEach((menu) => {
    //     if (menu.index !== key && menu.children && menu.children.length > 0) {
    //       menu.$refs.menuRef.close(menu.index);
    //     }
    //   });
    // }
  }

  const handleClose = (key, keyPath) => {
    // Handle close logic here
  }

  const changeMenu = (item) => {
    console.log(item);
    router.push({ name: item.name });
    // this.$router.push({ name: item.name });
  }

  onMounted(() => {
    setCollapseState(window.innerWidth);
    window.addEventListener('resize', () => {
      setCollapseState(window.innerWidth);
    });
  });

  onBeforeUnmount(() => {
    window.removeEventListener('resize', setCollapseState);
  });

</script>

<style scoped lang="less">
.menu_box {
  height: 100%;

  .el-menu {
    height: 100%;
  }
}
</style>