记录一下笔记，以下vue项目案例使用vue-cli搭建 ;
一.安装依赖
1. 使用npm命令安装所需依赖vue-i18n , 此demo安装的版本为vue-i18n@8.24.2;
# 安装命令
npm i vue-i18n@8.24.2
- 安装完成之后在入口文件先引入一下 , 检查是否安装成功;
main.js
import VueI18n from "vue-i18n"
console.log(VueI18n); // 浏览器看到打印就表示安装成功啦
- 发现引入报错, 经测试可能是vue-cli版本环境的问题 , 所以改变引入路径;
// main.js
import VueI18n from 'vue-i18n/dist/vue-i18n'
console.log(VueI18n); // 这样就成功了
二.配置多语言包
- 安装成功后,就可以在src目录下创建配置文件了 , 文件格式结构如下:
src
language
config 配置文件
zh.js 中文文件
zh-hk.js 中文繁体
en.js 英语文件
index.js
- 以下代码为简单配置的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实例上
...
// 引入配置文件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. 给按钮添加点击事件
<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 = '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(); // 刷新页面}
以上为i18n在H5端的 安装/配置/使用方法 , 如果在页面多语言多的项目下就要手动进行翻译,然后修改配置文件中的字段 , 文字内容一多难免会出现一些错误 , 所以开发前有国际化需求的话最好给元素预留出来位置 , 高度不要固定死。