前言
最近接手一个项目,该项目多国家使用,需要支持多语言的切换,在此记录。
解决一下问题:
- 如何实现多语言切换 ?
- 如何动态切换语言并更改elementUI语言 ?
- 更改完elementUI组件视图不更新?
- 如何全局使用 $t 函数 ?
- 如何在js文件里使用vue-i18n ?
如何实现多语言切换 ?
1、安装包vue-i18n
2、在src目录下新建如图:

en.js
- const EN = {
- login: {
- title: 'User Login'
- },
- }
- export default EN
pl-pl.js
- const PL_PL = {
- login: {
- title: 'U?ytkownik jest zalogowany'
- },
- }
- export default PL_PL
zh-cn.js
- const ZH_CN = {
- login: {
- title: '用户登录'
- },
- }
- export default ZH_CN
index.js
- import { createI18n } from 'vue-i18n/index'
- import 'dayjs/locale/zh-cn'
- import zh from './zh-cn'
- import en from './en'
- import pl from './pl-pl'
- const messages = {
- 'zh-cn': zh,
- 'en': en,
- 'pl': pl
- }
- // Gets the current locale
- export function getLanguage() {
- // Use the language of choice
- const chooselang = localStorage.getItem('locale')
- if (chooselang) return chooselang
- // if not shoose language
- const lang = (navigator.language || navigator.browserLanguage).toLowerCase()
- const locales = Object.keys(messages)
- return locales.includes(lang) ? lang : 'zh-cn'
- }
- const i18n = createI18n({
- locale: getLanguage(),
- fallbackLocale: 'en',
- global: true,
- messages
- })
- export function $t(args) {
- return i18n.global.tc(args)
- }
- console.log($t('login.title'))
- export default (app) => {
- app.use(i18n)
- }
说明
getLanguage 函数 判断当前localStorage是否已有选择过语言如果没有则获取当前浏览器的语言;
封装 $t 函数并导出用在js文件中
3、 在main.js中
- import language, { getLanguage, $t } from './language'
- language(app)
4、在vue文件中使用
- <template>
- //1.
- <div class="login clamp ta-c fs-28 fw-b m-b10">{{ $t('login.title') }}</div>
- //2.
- <el-input v-model="$t('login.title')"></el-input>
- </template>
如何动态切换语言并更改elementUI语言 ?
1、利用vuex,在mutations中写一个方法更改element语言
- // ----------------------- state -----------------------------
- import { getLanguage } from '@/language'
- const state = {
- lang: getLanguage()
- }
- export default state
- // ----------------------- mutations-----------------------------
- import * as Types from './types'
- import locale from 'element-plus/lib/locale'
- import localeZH from 'element-plus/lib/locale/lang/zh-cn'
- import localeEN from 'element-plus/lib/locale/lang/en'
- import localePL from 'element-plus/lib/locale/lang/pl'
- const element = {
- 'zh-cn': localeZH,
- 'en': localeEN,
- 'pl': localePL
- }
- const mutations = {
- // 切换语言
- [Types.SET_LANG](state, lang) {
- state.lang = lang
- localStorage.setItem('locale', lang)
- locale.use(element[lang])
- }
- }
- export default mutations
- // ----------------------- types-----------------------------
- export const SET_LANG = 'SET_LANG'
2、使用
- import * as Types from '@/store/types'
- import { useI18n } from "vue-i18n";
- export default {
- setup(props,ctx) {
- const { locale: lang } = useI18n({ useScope: "global" })
- let store = useStore()
- const handelLanguage = (name) => {
- lang.value = name
- store.commit(Types.SET_LANG, name)
- }
- return {
- handelLanguage
- }
- }
- }
更改完elementUI组件视图不更新?
这时你会发现就算我们提交commit去更改elementUI的语言 页面上也没有发生变化,因为视图组件并没有更新,如何刷新组件使之重新加载呢?
1、 在router-view上控制视图显示/隐藏
- // ----------------------- template-----------------------------
- <router-view v-if="isReloadRouter"/>
- // ----------------------- script-----------------------------
- const reload = () => {
- state.isReloadRouter = false
- nextTick(() => {
- state.isReloadRouter = true
- })
- }
- provide("reload", reload)
- <-- 自行引入 provide nextTick ->
2、 在切换语言时调用reload
- const handelLanguage = (name) => {
- lang.value = name
- store.commit(Types.SET_LANG, name)
- inject('reload')()
- }
3、需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言
- import language, { getLanguage, $t } from './language'
- import '@/styles/elementDefault.scss'
- store.commit(Types.SET_LANG, getLanguage())
如何全局使用 $t 函数 ? 如何在js文件里使用vue-i18n ?
全局挂在 $t 函数 ,在js文件里直接使用 $t 函数。
方法一:通过app.config.globalProperties挂在到全局
方法二: 通过provide、inject来实现
- import language, { getLanguage, $t } from './language'
- const app = createApp(App);
- // ----------------------- app.config.globalProperties -----------------------------
- app.config.globalProperties.$t = $t
- // 使用
- import { getCurrentInstance } from 'vue'
- const { proxy } = getCurrentInstance()
- proxy.$t()
- // ----------------------- provide、inject -----------------------------
- // main.js中
- app.provide('$t', $t)
- // 使用
- const $t = inject('$t')
- ElMessage.warning({
- message: $t('login.warnMessage'),
- type: 'warning'
- });
vue3不推荐在原型链上挂载一些东西,而更推荐使用provide、inject,所以最好使用通过依赖和注入provide和inject的方式
在router.js中不能直接使用$t, 需自行引入该函数
- import { $t } from '@/language'
- {
- path: '/mainManage/device',
- name: 'device',
- hidden: false,
- meta: { icon: 'circle', title: $t('router.device') },
- component: () =>
- import(/* webpackChunkName: "device" */ '@/views/mainManage/device')
- },
目前有一问题:因为我菜单展示的字段取的是路由信息里的title,router.js只在项目第一次进入的时候调用,当切换语言的时候菜单字段不会动态切换,只有刷新浏览器才会改变,如有解决方法希望留言告知!!!
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注w3xue的更多内容!