Vue3后台管理系统的国际化，多语言转换！（中文英文繁体）

一朵好运莲

已于 2024-12-19 08:41:49 修改

阅读量2.2k

点赞数 17

文章标签： vue.js 前端 javascript

于 2024-11-20 11:39:34 首次发布

本文链接：https://blog.youkuaiyun.com/xiaolouuuu/article/details/143906108

版权

当我们大体完成一个后台管理系统的搭建，想在其基础上完成国际化，使它能有多种语言的切换。这该如何实现呢？

一、安装 vue-i18n 和 element-plus

二、配置 vue-i18n

1、创建一个i18n的文件夹，在里面配置如下文件结构

2、在index.js中来配置 vue-i18n

3、配置en.js，zh.js，ft.js

一、安装 `vue-i18n` 和 `element-plus`

vue-i18n 是一个国际化插件，专为 Vue.js 应用程序设计，用于实现多语言支持。它允许你将应用程序的文本、格式和消息转换为用户的首选语言，从而提供本地化体验。
element-plus可以为我们提供一个下拉框

npm install element-plus vue-i18n@next -S

二、配置 `vue-i18n`

`1、创建一个i18n的文件夹，在里面配置如下文件结构：`

en.js是英文语言包，zh.js是中文语言包，ft.js是繁体语言包。

2、在index.js中来配置 `vue-i18n`：

// 引入i18n
import { createI18n } from "vue-i18n";
import zh from "./langs/zh.js";
import en from "./langs/en.js";
import ft from "./langs/ft.js";

// 语言包
const messages = {
  zh,
  en,
  ft,
};

const i18n = createI18n({
  legacy: false, //处理报错信息，默认为真
  locale: "zh", //默认语言
  messages,
});

export default i18n;

3、配置en.js，zh.js，ft.js。

zh.js：

export default {
  messages: {
    loginTitle: "外卖管理系统",
    switchLanguage: "切换语言",
    blanketOrder: "总订单",
    totalSales: "总销售额",
    orderQuantityToday: "今日订单量",
    orderSalesToday: "今日销售量",
    Home: "后台首页",
    OrderManagement: "订单管理",
    ProductManagement: "商品管理",
    ProductList: "商品列表",
    ProductAdd: "商品添加",
    ProductCategory: "商品分类",
    ShopManagement: "店铺管理",
    AccountManagement: "账号管理",
    AccountList: "账号列表",
    AccountAdd: "账号添加",
    ChangePassword: "修改密码",
    PersonalCenter: "个人中心",
    SalesStatistics: "销售统计",
    ProductStats: "商品统计",
    OrderStats: "订单统计",
    ProductCategory: "商品分类",
  },
};

en.js：

export default {
  messages: {
    loginTitle: "Delivery MS",
    switchLanguage: "Switch Language",
    blanketOrder: "blanket order",
    totalSales: "total sales",
    orderQuantityToday: "Order quantity today",
    orderSalesToday: "Order sales today",
    Home: "Background home page",
    OrderManagement: "Order management",
    ProductManagement: "Product management",
    ProductList: "Product list",
    ProductAdd: "Product add",
    ShopManagement: "Shop management",
    AccountManagement: "Account management",
    AccountList: "Account list",
    AccountAdd: "Account add",
    ChangePassword: "Change password",
    PersonalCenter: "Personal center",
    SalesStatistics: "Sales statistics",
    ProductStats: "Product statistics",
    OrderStats: "Order statistics",
    ProductCategory: "Product category",
  },
};

ft.js

export default {
  messages: {
    loginTitle: "外賣管理系統",
    switchLanguage: "切換語言",
    blanketOrder: "總訂單",
    totalSales: "總銷售額",
    orderQuantityToday: "今日訂單量",
    orderSalesToday: "今日銷售量",
    Home: "後台首頁",
    OrderManagement: "訂單管理",
    ProductManagement: "商品管理",
    ProductList: "商品列表",
    ProductAdd: "商品添加",
    ProductCategory: "商品分類",
    ShopManagement: "店鋪管理",
    AccountManagement: "賬號管理",
    AccountList: "賬號列表",
    AccountAdd: "賬號添加",
    ChangePassword: "修改密碼",
    PersonalCenter: "個人中心",
    SalesStatistics: "銷售統計",
    ProductStats: "商品統計",
    OrderStats: "訂單統計",
    ProductCategory: "商品分類",
  },
};

4、在main.js中引入

import { createApp } from "vue";

import App from "./App.vue";

import i18n from "./i18n/index.js";

const app = createApp(App);

app.use(i18n);

app.mount("#app");

三、下拉列表语言切换

1、Element组件的搭建

  <div class="header-right">
      <el-dropdown placement="bottom-start" style="margin-right: 20px">
        <el-button> {{ $t("messages.switchLanguage") }} </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="changeLanguage('zh')"
              >中文</el-dropdown-item
            >
            <el-dropdown-item @click="changeLanguage('en')"
              >English</el-dropdown-item
            >
            <el-dropdown-item @click="changeLanguage('ft')"
              >繁體</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

2、切换事件的实现

import { ref } from "vue";
//引入i18n
import { useI18n } from "vue-i18n";
const { locale } = useI18n();

//  切换语言
const changeLanguage = (type) => {
  locale.value = type;
};

3、将切换的语言展示到页面

比如要把订单统计变成可切换的语言，就在特定的地方调用：

 <h2 style="color: #595959; margin-bottom: 20px">
      {{ $t("messages.OrderStats") }}
    </h2>

就可以切换了：

四、动态路由侧边栏的转换

由于这些侧边栏的菜单名是通过meta中的name用v-for渲染上去的，所以不能直接写。

1、给meta添加title属性

2、在语言包内添加对应title的翻译

3、把菜单的项改成字符串模板

{{ $t(`messages.${item.meta.title}`) }}以此实现$t的动态渲染。

  <template v-for="item in props.menuData" :key="item.id">
    <el-menu-item
      @click="handleClick(item, `${props.index}-${item.meta.id}`)"
      v-if="!item.children"
      :index="`${props.index}-${item.meta.id}`"
      :key="`${props.index}-${item.meta.id}`"
    >
      <el-icon size="20">
        <!-- .动态组件 -->
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{ $t(`messages.${item.meta.title}`) }}</span>
    </el-menu-item>
    <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
      <template #title>
        <el-icon size="20">
          <!-- .动态组件 -->
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ $t(`messages.${item.meta.title}`) }}</span>
      </template>
      <!-- .递归 -->
      <tree-menu
        :index="`${props.index}-${item.meta.id}`"
        :menuData="item.children"
      />
    </el-sub-menu>
  </template>