1、先安装依赖 npm install vue vue-i18n --save
2、在vue项目assets文件夹下新建一个 i18n 文件夹存放i18n要用的文件
3、新建lang文件夹存放语言包
/*静态文案中文zh.js*/
module.exports = {
/*官网顶部文案*/
header:{
'out':'退出登录',
'back':'返回首页'
},
/*后台登录页文案*/
login:{
'title' : '软件系统',
'username' : '请输入用户名',
'password' : '请输入密码',
'login' : '登录',
'language' : '请选择语言'
}
}
/*静态文案英文en.js*/
module.exports = {
/*官网顶部文案*/
header:{
'out':'logout',
'back':'return index'
},
/*后台登录页文案*/
login:{
'title' : 'Software system',
'username' : 'Please enter the user name',
'password' : 'Please enter your password',
'login' : 'Login',
'language' : 'Please select language'
}
}
4、新建一个index.js
import VueI18n from 'vue-i18n' //引入vue-i18n
import Vue from 'vue'
Vue.use(VueI18n)
var locale;
localStorage.getItem('locale') ? locale = localStorage.getItem('locale') : locale = 'zh';//获取本地存储的locale值
const i18n = new VueI18n({
locale: locale, // 语言标识
messages: {
'zh': require('./lang/zh'), // 中文语言包
'en': require('./lang/en'), // 英文语言包
// 'jp': require('./lang/jp'), // 日文语言包
//'kr': require('./lang/kr') // 韩文语言包
},
})
export default i18n
5、在main.js引入i18n并具名在vue
import i18n from './assets/i18n';
new Vue({
router,
store,
i18n, //挂载i18n
render: h => h(App),
}).$mount('#app')
6、使用语言
<el-button type="primary" style="height: 28px;margin: 0 10px;padding:0 2px;line-height: 28px;" @click="changeLang">{{$t("header.out")}}</el-button>
//$t("header.out")
7、修改切换语言
changeLang(){
if(this.$i18n.locale == 'zh'){
this.$i18n.locale = 'en';
}else{
this.$i18n.locale = 'zh';
}
localStorage.setItem('locale',this.$i18n.locale); //存入本地的locale值
}