實現(xiàn)多語言配置的Vue3項目方式

更新時間：2025年12月04日 08:54:35 作者：竭點

在Vue3項目中使用vue-i18n庫實現(xiàn)多語言配置,通過安裝、創(chuàng)建語言文件、配置全局語言并實現(xiàn)語言切換,為用戶提供多語言界面體驗

步驟一：安裝 vue-i18n

首先，在您的 Vue 3 項目中安裝vue-i18n 庫。您可以通過以下命令來安裝：

npm install vue-i18n@next

步驟二：創(chuàng)建語言文件

在src下創(chuàng)建一個語言文件夾，用來存放語言配置文件（en.js，zh.js,i18n.js）三個文件，我這個項目只需要中英文，現(xiàn)在做一個簡單使用示例

具體的文件

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>

在菜單配置項里頭做語言切換的監(jiān)聽

<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: '系統(tǒng)管理',
        name: 'systemManagement',
        icon: markRaw(Setting),
        
      },
      {
        index: '3',
        title: '網(wǎng)關配置',
        name: 'equipmentConfig',
        icon: markRaw(IconMenu)
      },
      {
        index: '4',
        title: '日志管理',
        name: 'logManagement',
        icon: markRaw(Document)
      }
    ];
  }
  // 監(jiān)聽語言變化，并重新初始化菜單數(shù)據(jù)
  watch(locale, () => {
    initMenuData();
  });
  // 初始化菜單數(shù)據(jù)
  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>

效果如下：