vue3中引入vue-i18n, 国际化方案

前言

该项目使用vue(3.0.5) + vue-i18n(9.1.2) +vite2.0

所谓的vue-i18n国际化方案，简而言之，就是根据它的规则自己建立一套语言字典，对于每一个字（message）都有一个统一的标识符，我们直接在文中使用该标识符代替原来固定的某一语言，该方案在内部会自动转为你需要查看的语言。

原因

当前项目需要采用国际化方案，但因为采用了vue3.0，网上诸多说明不太明白，故在此记录一下。。。

使用流程

1. 下载安装

npm install vue-i18n

2. 在 main.js 所在目录建立 locales 文件夹，该文件对外暴露了全局注册接口，以及对message的配置（建议）

3. 初步使用

如果需要国际化的message不是太多，可以直接将条目信息配置在getMessage.js文件中

setupI18n.js

import { createI18n } from 'vue-i18n'		//引入vue-i18n组件
import messages from './getMessage'//注册i8n实例并引入语言文件const localeData = {legacy: false, // composition APIlocale: 'zh-CN',messages,}// setup i18n instance with glob
export function setupI18n(app) {const i18n = createI18n(localeData);app.use(i18n);
}

getMessage.js

export default {en: {header: {// nav menuhome: 'Home',aboutUs: 'About',productService: 'Product',cases: 'Cases',news: 'News',contactUs: 'Contract'}},zh_CN: {header: {home: '首页',aboutUs: '关于我们',productService: '产品服务',cases: '行业解决方案',news: '新闻动态',contactUs: '联系我们'}}
}

在main.js中导入实例

/**
...
**/
// 国际化组件
import { setupI18n } from '/@/locales/setupI18n';
setupI18n(app);

在页面中应用：

我这里的数据是导入的，要注意，条目（message）的层级引用关系。

如果是字符串：{{  t( 'header.home')  }} ,  变量的话要用 ${variable} 拼接一下。

4.进阶使用

一般情况下字典条目（message）较多，如果全放在 getMessage.js 里面会带来较大的不变, 所以我们在 locales 文件夹下建立 languange 文件；

里面按语言类型划分，每种语言，按不同的场景划分模块，这样便于我们的查找和修改。

getMessage.js 作统一引入，以后添加翻译配置项的时候直接在 language 里面添加就可以了。

还有最后一步，就是将我们在项目中用到的一些支持国际化的组件，在 userLocal.js 中进行配置，在我们切换语言的时候，同步切换组件的语言。

在 getMessage.js 文件中，我们统一引入。

// 将各种message modules 汇总到这里
import { set } from 'lodash-es';
const modules = import.meta.globEager('./language/**/*.js');function genMessage(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 } = genMessage(modules);// console.log(messages);
export default language;

注意上面文件类型划分，从语言类型的文件夹开始，每一个文件夹名及文件名都作为对象的一层，所以访问的时候，要跟这个结构层次保持一致

{{ t(`layout.header.${menu.label}`) }}

import.meta.globEager功能查看

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！