当前位置:   article > 正文

vue3实现国际化_vue3 国际化

vue3 国际化

前言

开发了一个国际化的项目,技术栈是vue3 + TS + vite + vant + pinia, 需要设置多语言,采用的是vue-i18n这一个国际化插件,貌似只看到英文文档,而且网上找的其他教程大部分是针对vue2的,对应vue3的比较少,所以自己整理了一下

安装引入

npm install vue-i18n
  • 1

在src下新建locals文件夹,包含index.js,en.js,zh.js(只做中英文切换)

// zh.js
export default {
    login: {
        login: '登录',
        userName: '用户名'password: '密码'
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
// en.js
export default {
    login: {
        login: 'login',
        userName: 'userName'password: 'password'
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
// 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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

有个注意的地方就是上面用了缓存,待会会说到为什么要这样做

最后在main.js引入就好了

import { createApp } from 'vue'
import i18n from './locals'

const app = createApp(App)
app.use(i18n)

app.mount('#app')
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

至此插件就算配置好了,接下来使用的话基本上就两种场景,一是在<template>里面,一种是在setup里面

使用

  • <template>中使用

要用到一个$t()的方法,或者使用v-t也行

<div>
    {{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>
  • 1
  • 2
  • 3
  • 4

关于$t()还有很多用法,可以动态传参等,具体还是去官网看看

  • setup中使用
<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

console.log(t('login.useName'))
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

目前项目中只采用这两种方式,还有其他的就不展开了

  • 切换语言

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

遇到的问题

  • 切换语言后,跳转页面或者刷新当前页后语言又重置了

这是因为切换语言是修改的全局变量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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

当然啦解决方法不止这一种,还可以使用watch等,自己去找资料看看吧~

总结

按照目前的生态来看,做国际化项目还是比较多资料来参考的,ui框架用的是vant,这也可以通过设置locale来改变组件的语言。

import { Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
Locale.use('en-US', enUS)
  • 1
  • 2
  • 3

业务代码使用vue-i18n也很简单,是个不错的选择

完事~

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/190942
推荐阅读
相关标签
  

闽ICP备14008679号