vue国际化

前言

现在的大公司都走国际化路线，我们应用程序也不例外。今天就在 Vue3 项目中整一个比较简单的国际化

背景

之前搞国际化的时候，也搜索了很多帖子，但是没有一个可以完整的实现。今天有空搞了一版，大家有什么问题欢迎留言探讨

项目框架

vite + vue3 + elementPlus + vue-i18n + vue-cookie

一、准备工作

首先需要安装两个三方件
1、国际化三方件：vue-i18n
npm install vue-i18n
2、cookie 三方件：vue-cookie
npm install vue-cookie

二、国际化

1、在项目中创建一个 local 目录，再在 local 目录下面创建一个 lang 目录 和 index.ts 文件

2、 index.ts 文件

import { createI18n } from "vue-i18n"
import enLang from "./lang/en"
import zhLang from "./lang/zh"
import VueCookie from "vue-cookie"//从 cookie 中获取语言，如果没有则默认为 中文
const defaultLang = VueCookie.get("local") || "zh"const i18n = createI18n({locale: defaultLang, //默认语言fallbackLocale: "zh",messages: {en: enLang,zh: zhLang} //设置语言内容
})export default i18n

3、main.ts 文件

import i18n from './router/local/index'
app.use(i18n)

4、zh.ts 文件

export default {system: {lang: "中文"},table: {name: "王小龙",address: "上海市普陀区金沙江路 1517 弄"}
}

5、en.ts 文件

export default {system: {lang: "en"},table: {name: "Wang Xiaolong",address: "Lane 1517, Jinshajiang Road, Putuo District, Shanghai"}
}

6、home.vue 文件

<!-- home.vue -->
<template><el-button @click="changeLanguage">{{ $t("system.lang") }}</el-button><el-table:data="tableData"row-key="id"><el-table-column type="selection" :reserve-selection="true" width="55" /><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="地址" /></el-table>
</template>
<script setup lang="ts">
import { ref } from "vue";
import VueCookie from "vue-cookie"
import { useI18n } from "vue-i18n"//国际化
const { t } = useI18n()//当前语言
let isZH = ref(VueCookie.get("local") != "en");/*** 切换语言*/
const changeLanguage = () => {VueCookie.set( "local", isZH.value ? "en" : "zh");//对页面进行重新挂载location.reload()
}const tableData = ref([{id: 1,date: "2016-05-02",name: t("table.name"),address: t("table.address"),},// ...更多数据{id: 2,date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: 3,date: "2016-05-02",name: "王小保",address: "上海市普陀区金沙江路 1519 弄",},
]);
</script>