写了好几次中英文切换,每次重新写都要去翻之前的项目代码来cv,提取出来记录一下
以下方向仅供参考。
官方文档:https://kazupon.github.io/vue-i18n/guide/formatting.html
一、下载vue-i18n
目前我用的版本终端输入:
npm install vue-i18n@8.28.2
关于版本环境兼容问题:终端不同版本vue-i18n可运行的node环境是有要求的
二、封装的组件代码”
模块文件i18n中,langs是切换的语言文件
en.js文件:
const English ={
//前面还有很多分模块的切换变量,如login模块下,有两个变量login、tip
.......
login:{
login:'Login',
tip:'Please enter password'
},
.....
}
export default English
zh.js文件:
const Chinese={
.......
login:{
login:'登录',
tip:'请输入密码'
},
.....
}
export default Chinese
i18n.js文件:
//引入部分
import Vue from 'vue'
import VueI18n from 'vue-i18n'
//引入element 自带的语言包
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
//引入自己创建的语言包
import enLocale from './langs/en'
import zhLocale from './langs/zh'
//注册i18n
Vue.use(VueI18n)
//设置i18n实例配置项
const i18n = new VueI18n({
locale: window.sessionStorage.getItem('lang_IAP') || 'en', //默认语言
messages:{
//合并自己的语言包和element的语言包
en: {
...enLocale,
...elementEnLocale
},
zh: {
...zhLocale,
...elementZhLocale
}
}
})
//暴露出去
export default i18n
封装切换中英文组件Language.vue:
<template>
<el-dropdown class="lang-container hover-pointer" trigger="click">
<span style="color: #f5f6f8;">{{ language }} <i class="el-icon-caret-bottom el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="changeLangauge('zh')">
<span style="display:block;">简体中文</span>
</el-dropdown-item>
<el-dropdown-item @click.native="changeLangauge('en')">
<span style="display:block;">English</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
name: 'Language',
data() {
return {
language: ''
}
},
created() {
this.showLangauge()
},
methods: {
showLangauge() {
//默认中文
const currentLang = window.sessionStorage.getItem('lang_IAP') || 'en'
// const currentLang='zh'
switch (currentLang) {
case 'zh':
this.language = '简体中文'
break
case 'en':
this.language = 'English'
break
}
},
changeLangauge(lang) {
this.$i18n.locale = lang
window.sessionStorage.setItem('lang_IAP', lang)
window.location.reload()
}
}
}
</script>
<style lang="scss" scoped>
.hover-pointer {
span {
cursor: pointer
}
}
</style>
main.js文件修改
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store/index';
import axios from 'axios';
//引入 i18n
import i18n from './i18n/i18n'
//element官方方法
//为了实现element插件的多语言切换
Vue.use(ElementUI,{
i18n:(key,value) =>i18n.t(key,value)
})
Vue.prototype.$axios = axios;
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
router,
store,
i18n, //添加进vue实例中
render: (h) => h(App),
}).$mount('#app');
三、组件使用
</template>
<Language></Language>
</template>
import Language from "../components/Language.vue";
四、代码中使用
不同类型中的使用方式
在html中:
//1、
<span class="text">{{$t("login.topTiTle")}}</span>
//2、
<el-form-item :label="$t('login.tip')+`:`" prop="password">
....
</el-form-item>
在data中:
data() {
return {
....
rules: {
password: [{ required: true, message: `${this.$t('login.tip')}`, trigger: 'blur' }],
},
};
},
在函数中:
//1、
this.$message.error(`${this.$t('message.passwordErr')}`);
//2、
this.$message({
message: `${this.$t('message.login_success')}`,
type: 'success',
});