苏州网站推广服务,官方网站制作哪家专业,石家庄专业商城网站制作,最大的软件公司前言
现在的大公司都走国际化路线#xff0c;我们应用程序也不例外。今天就在 Vue3 项目中整一个比较简单的国际化
背景
之前搞国际化的时候#xff0c;也搜索了很多帖子#xff0c;但是没有一个可以完整的实现。今天有空搞了一版#xff0c;大家有什么问题欢迎留言探讨…前言
现在的大公司都走国际化路线我们应用程序也不例外。今天就在 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) || zhconst 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 --
templateel-button clickchangeLanguage{{ $t(system.lang) }}/el-buttonel-table:datatableDatarow-keyidel-table-column typeselection :reserve-selectiontrue width55 /el-table-column propdate label日期 width180 /el-table-column propname label姓名 width180 /el-table-column propaddress label地址 //el-table
/template
script setup langts
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
