vue实现国际化
一、实现国家化配置
1、安装vue-i18n
npm install vue-i18n --save
打开package.json 文件查看 vue-i18n
2、在assets文件下新建文件夹language包含 index.js,language-CN.js, language.EN.js 三个文件
3、写代码
index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from './language-EN'
import usLocal from './language-CN'
Vue.use(VueI18n);
const messages = {
en: {
...enLocale
},
cn: {
...usLocal
}
}
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'cn', // 通过this.$i18n.locale的值实现语言切换
messages,
});
export default i18n;
language-cn.js
export default {
message: {
'hello': '你好 世界',
'desc': 'Ant Design 是西湖区最具影响力的 Web 设计规范',
'loginAccount': '账户密码登录',
'loginByPhone': '手机号登录',
'account': '账户',
'password': '密码',
'autoLofin': '自动登录',
'forgetPassword': '忘记密码',
'loginBtn': '登录',
'otherLoginWay': '其他方式登录',
'register': '注册',
'help': '帮助',
'privacy': '隐私',
'clause': '条款',
'phone': '手机号',
'code': '验证码',
'getCode': '获取验证码',
}
};
language-en.js
export default {
message: {
'hello': 'hello world',
'desc': 'Ant Design is the most influential web design specification in Xihu district',
'loginAccount': 'Credentials',
'loginByPhone': 'Mobile number',
'account': 'Account',
'password': 'password',
'autoLofin': 'Remember me',
'forgetPassword': 'Forgot your password?',
'loginBtn': 'Login',
'otherLoginWay': 'Sign in with',
'register': 'Sign up',
'help': 'help',
'privacy': 'privacy',
'clause': 'clause',
'phone': 'Mobile Number',
'code': 'Verification code',
'getCode': 'Get code',
}
}
4、在main.js 中使用
import i18n from './assets/language/index';
new Vue({
router,
i18n,
render: h => h(App),
}).$mount('#app')
二、在页面使用
按钮控制切换语言
this.$i18n.locale,当你赋值为‘cn’时,导航栏就变成中文;当赋值为 ‘en’时,就变成英文:
<div class="top_btn" @click="changeLangEvent">中文</div>
changeLangEvent() {
console.log('changeLangEvent');
this.$confirm('确定切换语言吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if ( this.$i18n.locale === 'cn' ) {
this.$i18n.locale = 'en';//关键语句
console.log('en')
}else {
this.$i18n.locale = 'cn';//关键语句
console.log('cn')
}
}).catch(() => {
console.log('catch');
this.$message({
type: 'info',
});
});
}
静态渲染
<span v-text="$t('message.loginAccount')"></span>
<span>{{$t('message.loginAccount')}}</span>
如果是element-ui 的,在要翻译的前面加上冒号
比如:label="用户账号" 就改成 :label="$t('message.loginAccount')"
动态渲染
<span class="el-dropdown-link">{{loginAccount}}</span>
computed:{
navCompany:function(){
if(this.nav_company){
let str = 'message.'+this.loginAccount;
return this.$t(str);
}
}
},
<el-submenu
v-for="(value, title1, one) in navList"
:key="one+1"
:index="(one+1).toString()">
<template slot="title">
<router-link :to="linkList[title1]">{{ getTitle(title1) }}</router-link>
</template>
</el-submenu>
methods: {
getTitle(title){
let str = 'message.'+title;
return this.$t(str);
}
}
到这,前端 vue-i18n 国际化插件在模块化环境中的开发实践就全部完成了。