Vue 项目中实现多语言国际化 ( i18n ）

Posted 2023-02-23

参考技术A

现在项目中很多情况下需要实现 国际化 ，即 多语言 。比较常用的就是 中/英 文的切换。
普遍常用的就是 I18N 了，怎么实现呢？莫急，咱们往下瞅！

第一步：安装

第二步：在 src 目录下新建一个 lang 文件

一般有三个文件： index.js( 配置 ) 、 zh( 中文 ) 、 en( 英文 )
如果有个更多的语言设置，新增对应的 js 文件即可
注意：所有语言包的内部结构必须一样，方便调用

第三步：main.js 里引入 i18n 的配置

第四步：在页面使用

引入 i18n 以后，会全局注册一个变量 $t
平时我们取值都是 name
现在我们取值是 $t(index.title) ， index.title 就是在语言里的属性

哇哦，多语言是不是很简单，动起手来，赶紧试试吧！！！

vue项目国际化(多语言)

参考技术A

记录一下笔记，以下 vue 项目案例使用 vue-cli 搭建 ;

1. 使用 npm 命令安装所需依赖 vue-i18n , 此demo安装的版本为 vue-i18n@8.24.2 ;

main.js

二.配置多语言包

language > config > zh-hk.js

language > config > en.js

import Vue from \'vue/dist/vue.min.js\';
import VueI18n from \'vue-i18n/dist/vue-i18n\';
import Cookies from \'js-cookie\';

Vue.use(VueI18n);

// 存储在本地,刷新后不会丢失
const language = Cookies.get(\'language\') || \'zh\';
Cookies.set( \'language\' , language )
const i18n = new VueI18n(
locale: language, // 语言标识
messages:
zh: require(\'./config/zh\'), // 中文
\'zh-hk\': require(\'./config/zh-hk\'), // 中文繁体-香港
en: require(\'./config/en\'), // 英文

);

export default i18n;

...
// 引入配置文件index
import i18n from "./language"

new Vue(
el: \'#app\',
router,
store,
i18n, // 挂载到vue实例
components: App ,
template: \'<App/>\'
)

<li><a href="javascript:;">语言切换/ $t(\'language.name\') </a></li>

console.log(this.$t(\'language.name\'));

<li><a href="javascript:;">语言切换/ $t(\'language.name\') </a></li>

<li><a href="javascript:;" @click="changeLang">语言切换/ $t(\'language.name\') </a></li>

changeLang() let currentLang = Cookie.get(\'language\'); if(currentLang === \'zh\') this. i18n.locale = \'en\'; Cookie.set(\'language\',\'en\') else if(currentLang === \'en\') this.$i18n.locale = \'zh\'; Cookie.set(\'language\',\'zh\')

changeLang() let currentLang = Cookie.get(\'language\'); if(currentLang === \'zh\') Cookie.set(\'language\',\'zh-hk\') else if(currentLang === \'zh-hk\') Cookie.set(\'language\',\'en\') else if(currentLang === \'en\') Cookie.set(\'language\',\'zh\') location.reload(); // 刷新页面