Vue3国际化多语言的切换

参考链接: link

Vue3国际化多语言的切换

一、安装 vue-i18n 和 element-plus

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

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

二、 配置 vue-i18n

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

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

2、在index.ts中来配置 vue-i18n：这个index.ts 只需要在main.ts引入就行了。

// 引入i18n
import { createI18n } from "vue-i18n";
import zh from "./zh";
import en from "./en";
import ft from "./ft";
// 语言包
const messages = {
  zh,
  en,
  ft,
};
const i18n = createI18n({
  legacy: false, //处理报错信息，默认为真
  locale: "zh", //默认语言
  messages,
});
export default i18n;

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

zs.ts

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.ts

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.ts

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");

三、前端去使用 下拉列表语言切换

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>

import { ref } from "vue";
//引入i18n
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
//  切换语言 函数
const changeLanguage = (type:string) => {
  locale.value = type;
};

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

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

其他组件不需要再去引入i18n ，和编写 切换函数了。因为main.ts将其作为全局使用。