vue3实现国际化的过程与遇到的问题详解
前言
开发了一个国际化的项目，技术栈是vue3 + TS + vite + vant + pinia, 需要设置多语言，采用的是vue-i18n这一个国际化插件，貌似只看到英文文档，而且网上找的其他教程大部分是针对vue2的，对应vue3的比较少，所以自己整理了一下
安装引入
npm install vue-i18n在class="lazy" data-src下新建locals文件夹,包含index.js,en.js,zh.js(只做中英文切换)
// zh.js
export default {
login: {
login: '登录',
userName: '用户名'，
password: '密码'
}
}// en.js
export default {
login: {
login: 'login',
userName: 'userName'，
password: 'password'
}
}// index.js
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'
const messages = {
en,
zh,
}
const language = (navigator.language || 'en').toLocaleLowerCase() // 这是获取浏览器的语言
const i18n = createI18n({
locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
fallbackLocale: 'en', // 设置备用语言
messages,
})
export default i18n有个注意的地方就是上面用了缓存，待会会说到为什么要这样做
最后在main.js引入就好了
import { createApp } from 'vue'
import i18n from './locals'
const app = createApp(App)
app.use(i18n)
app.mount('#app')至此插件就算配置好了，接下来使用的话基本上就两种场景，一是在<template>里面,一种是在setup里面
使用
- 在<template>中使用
要用到一个$t()的方法，或者使用v-t也行
<div>
{{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>关于$t()还有很多用法，可以动态传参等，具体还是去官网看看
- 在setup中使用
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
console.log(t('login.useName'))
</script>目前项目中只采用这两种方式，还有其他的就不展开了
- 切换语言
vue-i18n提供了一个全局变量locale，直接修改即可
<template>
<div class="menu">
<div class="menu-item" @click="changeLang('en')">English</div>
<div class="menu-item" @click="changeLang('zh')">中文</div>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const changeLang = (lang: string) => {
locale.value = lang
localStorage.setItem('lang', lang)// 重要！下面遇到问题里解释
}
</script>遇到的问题
- 切换语言后，跳转页面或者刷新当前页后语言又重置了
这是因为切换语言是修改的全局变量locale，当页面一刷新，相当于又重置为默认值了，所以上面采用缓存来解决
- 使用ref或者reactive设置的文字，切换语言后不更新
这是因为这里的数据是初始化产生的，并不能跟着local变化而响应变化，关于这一点，我是放在了computed里面解决的
<template>
<div class="ilst">
<div
v-for="item in list"
:key="item">
{{item}}
</div>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, computed } from 'vue'
const { t } = useI18n()
// 使用ref定义之后再改语言无效
//const list = ref([
// t('c100018'),
// t('c100019'),
// t('c100020'),
// t('c100021'),
// t('c100020'),
])
// 采用computed可解决
const list = computed(() => [
t('c100018'),
t('c100019'),
t('c100020'),
t('c100021'),
t('c100020'),
])
</script>当然啦解决方法不止这一种，还可以使用watch等，自己去找资料看看吧~
总结
按照目前的生态来看，做国际化项目还是比较多资料来参考的，ui框架用的是vant,这也可以通过设置locale来改变组件的语言。
import { Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
Locale.use('en-US', enUS)业务代码使用vue-i18n也很简单，是个不错的选择
到此这篇关于vue3实现国际化的过程与遇到问题的文章就介绍到这了,更多相关vue3实现国际化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
