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将其作为全局使用。