vue项目国际化(多语言)

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

一.安装依赖

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

# 安装命令
npm i vue-i18n@8.24.2

2. 安装完成之后在入口文件先引入一下 , 检查是否安装成功;

main.js

import VueI18n from "vue-i18n"
console.log(VueI18n); // 浏览器看到打印就表示安装成功啦

3. 发现引入报错, 经测试可能是vue-cli版本环境的问题 , 所以改变引入路径;

// main.js
import VueI18n from 'vue-i18n/dist/vue-i18n'
console.log(VueI18n); // 这样就成功了

二.配置多语言包

1. 安装成功后,就可以在src目录下创建配置文件了 , 文件格式结构如下:

src

…

language

config 配置文件

zh.js 中文文件

zh-hk.js 中文繁体

en.js 英语文件

index.js

…

2. 以下代码为简单配置的demo

language > config > zh.js

module.exports = {
   language:{
     	name:"中文简体"
   },
   login:{
         userTip:"请登录",
         registerFree:"免费注册",
         forget:"忘记密码"
   }
}

language > config > zh-hk.js

module.exports = {
   language:{
        name:"中文繁體-香港"
   },
   login:{
         userTip:"登錄",
         registerFree:"註冊",
         forget:"忘記密碼"
   }
}

language > config > en.js

module.exports = {
   language:{
        name:"English"
   },
   login:{
         userTip:"EnglishLogin",
         registerFree:"register",
         forget:"Forget Password"
   }
}

language > index.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;

3. 最后挂载到vue实例上

main.js

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

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

4.挂载成功后就可以直接在组件中使用定义好的变量了:

template 中使用

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

script 中使用

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

三. 在页面编写切换按钮

1. 最好写个下拉框选择 , 此demo就简单写了

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

2. css忽略 , 效果截图 , 默认是展示 中文简体

3. 给按钮添加点击事件

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

方法一 : 使用i18n的locale直接赋值切换:

changeLang(){    let currentLang  = Cookie.get('language');    if(currentLang === 'zh'){        this.$i18n.locale = 'zh-hk';        Cookie.set('language','zh-hk')    }else if(currentLang === 'zh-hk'){        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(); // 刷新页面}

4. 切换后效果

四.总结

以上为i18n在H5端的 安装/配置/使用方法 , 如果在页面多语言多的项目下就要手动进行翻译,然后修改配置文件中的字段 , 文字内容一多难免会出现一些错误 , 所以开发前有国际化需求的话最好给元素预留出来位置 , 高度不要固定死。