利用Vite2和Vue3实现网站国际化的全过程
前言
最近有人在吐槽项目使用 Vue3 之后，出现一堆问题，填坑困难，甚至是开发中才发现某些第三方库没有推出 Vue3 的版本，因此大发吐槽，强烈建议不使用 Vue3。
做好技术预研和兼容性调查是开发前的工作之一，特别是对于新技术或者大版本的更新，除非你有十个胆，否则不要在预研不充分的情况下，在正式项目中使用。
最近在将自己的某个 Vue3 的项目接入国际化配置，整体的过程跟 Vue2 并没有太大的区别，在此做下技术经验分享。
安装vue-i18n
npm i vue-i18n --save
这里使用的是 vue-i18n 来实现国际化多语言切换，i18n 这个名字其实是由英文单词 internationalization 的首尾两个字母和中间的字符数 18 组成，意为「国际化」。
配置Locales
在项目 src 中新建 locales 文件夹，在里面新建 language 文件夹，用于存储各个语言的文本配置。language 中新建 en 和 zh-CN 文件夹，并对应的新建 index.js，填充以下内容：
// src/locales/language/zh_CN/index.js
export default {
title: "中文标题",
}
// src/locales/language/en/index.js
export default {
title: "English title",
}
实现 getLangs.js
在 locales 中新建 getLangs.js 文件，用于获取 language 文件夹中的语言包并暴露出去。
这里用到了 lodash-es 插件，你需要安装该插件：
npm i lodash-es --save
具体代码如下：
import { set } from 'lodash-es'
const modules = import.meta.globEager('./language/**/*.js')
function getLanguages(langs, prefix = 'lang') {
const obj = {}
Object.keys(langs).forEach((key) => {
const mod = langs[key].default
let k = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')
const lastIndex = k.lastIndexOf('.')
k = k.substring(0, lastIndex)
const keyList = k.split('/')
const lang = keyList.shift()
const objKey = keyList.join('.')
if (lang) {
set(obj, lang, obj[lang] || {})
set(obj[lang], objKey, mod)
}
})
return obj
}
const { language } = getLanguages(modules)
export default language
创建 i18n 实例
接下来需要创建 i18n 实例，并挂载到 Vue。在 locales 中新建 i18n.js。代码如下：
import { createI18n } from 'vue-i18n'
import messages from './getLangs'
export default createI18n({
legacy: false,
locale: window.localStorage.getItem("lang") || 'zh_CN',
messages,
})
可以看到这里默认的语言配置是从浏览器中 localStorage 中获取的，没有则为 “zh-CN”。在切换语言后，需要将当前语言存起来，不然用户刷新，可就又回到默认语言配置了。
在 main.js 中引入：
import i18n from './locales/i18n'
const app = createApp(App)
app.use(I18n).mount("#app")
模板中使用
这里使用 composition api 的方式引入并使用，在模板对应的位置中，使用 t 函数获取当前语言配置下的展示文本，函数接收语言配置文件和属性的路径，通过点语法连接，如果找不到，则会将整个函数名称以字符形式展示。
<template>
<p>{{t(`index.title`)}}</p>
</template>
import { useI18n } from "vue-i18n";
export default {
setup() {
const { t } = useI18n();
return { t }
}
}
语言切换
常用的语言切换方式有两种，一种是将当前语言配置放到 url 上，切换语言即跳转到对应的路由，再展示当前语言下的对应文本。
第二种是无刷新/跳转的切换，将当前语言存储到本地缓存中，通过修改 vue-i18n 的 locale 的值切换语言。
这里推荐使用第二种，切换语言不需要刷新页面或者采用跳转的形式。
<template>
<a
href="javascript:;"
@click="setLocals(locale === 'zh_CN' ? 'en' : 'zh_CN')"
>
{{ locale === 'zh_CN' ? '英' : '中' }}
</a>
</template>
<script>
import { useI18n } from "vue-i18n";
import { ref } from "@vue/reactivity";
export default {
setup() {
const { t, locale } = useI18n();
const getLocals = () => window.localStorage.getItem("lang") || locale.value;
const currentLocale = ref(getLocals());
const setLocals = (lang = "") => {
locale.value = lang;
window.localStorage.setItem("lang", lang);
};
if (!window.localStorage.getItem("lang")) {
setLocals(currentLocale.value);
} else {
if (currentLocale.value !== locale.value) {
setLocals(currentLocale.value);
}
}
return {
t,
locale,
setLocals,
};
},
};
</script>
初始化的时候，先从本地获取当前语言，如果没有则获取默认的语言配置，切换语言时，不仅需要修改 locale 的值，还需要将当前语言存一份到本地缓存中。
关于切换后需要刷新后才生效
上面的例子，在模板中直接使用 t 函数渲染的文本，在语言切换时是无需刷新即可更新视图语言的，但如果是在 setup 中直接使用 t 函数，则不会立即更新，需要刷新后才生效。
这里不推荐在模板以外的地方使用 t 函数，如有必要，可以在组件中定义多语言文本，在模板中通过键值对的形式去访问。
切换语言触发其他组件更新
在一些场景中，页面展示的文本是通过外部获取的，无法直接由语言切换触发更新，需要实现类似兄弟组件的广播效果。
在 Vue3 中取消了 global bug 的使用，进而可以用 mitt 等插件代替。
总结
到此这篇关于利用Vite2和Vue3实现网站国际化的文章就介绍到这了,更多相关Vite2和Vue3网站国际化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
VueRouter是Vue.js的官方路由插件,用于实现单页应用的页面切换和导航,通过安装、配置路由规则、定义路由组件和使用&lt;router-link>、&lt;router-view>标签2025-01-01
这篇文章主要介绍了vue.js动态组件和插槽的使用汇总，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
本文主要介绍了Element-ui 滚动条美化的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了Vue实现todo应用的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了VUE前端按钮权限控制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue中点击按钮下载文件的实现方式,具有很的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
这篇文章主要介绍了详解Vue Elementui中的Tag与页面其它元素相互交互的两三事,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
本文主要介绍了vue3中Teleport和Suspense的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
Vue.js每天必学之数据双向绑定，如何进行绑定，如何进行数据双向绑定，感兴趣的小伙伴们可以参考一下2016-09-09
最新评论