第一步:
创建lang文件夹
index.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import Vue from 'vue' import VueI18n from 'vue-i18n' import Cookies from 'js-cookie' 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 './en' import zhLocale from './zh' Vue.use(VueI18n) const messages = { en: { ...enLocale, ...elementEnLocale }, zh: { ...zhLocale, ...elementZhLocale }, } export function getLanguage() { const chooseLanguage = Cookies.get('language') if (chooseLanguage) return chooseLanguage // if has not choose language const language = (navigator.language || navigator.browserLanguage).toLowerCase() const locales = Object.keys(messages) for (const locale of locales) { if (language.indexOf(locale) > -1) { return locale } } return 'zn' } const i18n = new VueI18n({ // set locale // options: en | zh | es locale: getLanguage(), // set locale messages messages }) export default i18n
zn.js
export default { header:{ hederTitle:'个人中心' } }
en.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
export default { header:{ hederTitle:'centerPeople' } }
第二步:在main.js引入
import Cookies from 'js-cookie' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); // 引入国际化 // import VueI18n from 'vue-i18n' import i18n from './common/lang' // internationalization Vue.use(ElementUI, { size: Cookies.get('size') || 'medium', // set element-ui default size i18n: (key, value) => i18n.t(key, value) }) Vue.config.productionTip = false new Vue({ i18n, // 最后 router, store, render: h => h(App) }).$mount('#app')
第三步:定义转化方法(在utils文件下创建i18n.js)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// translate router.meta.title, be used in breadcrumb sidebar tagsview export function generateTitle(objName,title) { const hasKey = this.$te(objName+'.' + title) if (hasKey) { // $t :this method from vue-i18n, inject in @/lang/index.js const translatedTitle = this.$t(objName+'.' + title) return translatedTitle } return title }
第四步:在页面引入
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="header_warp"> <div class="header_l">{{ generateTitle('header','hederTitle') }}</div> <div class="header_r"> <!-- <img class="userImg" src="../assets/mao.jpg" alt=""> --> <span>{{username}}</span> <span class="out" @click='loginOut'><img src="../assets/icon/loginout.png">退出</span> <span class="top_btn" @click="changeLangEvent">{{$i18n.locale =='zh'?'中文':'英文'}}</span> </div> </div> </template> <script> import { generateTitle } from '@/utils/i18n' import { loginOut } from "@/api/login"; import { setCookie,delCookie } from "@/utils/cookieUtils"; export default { name: 'HeaderWarp', data(){ return{ hederTitle:"个人中心" } }, computed: { username () { return '你好,'+this.$store.state.username } }, methods:{ generateTitle, loginOut:function() { loginOut().then(()=>{ // if(process.env.NODE_ENV === "development" ){ // delCookie('dj_mplan_cce_login'); // } delCookie('dj_mplan_cce_login'); this.$store.commit('usernameCommit',''); this.$router.push('/login') }) }, changeLangEvent() { console.log('changeLangEvent'); this.$confirm('确定切换语言吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { if ( this.$i18n.locale === 'zh' ) { this.$i18n.locale = 'en';//关键语句 // console.log('en') }else { this.$i18n.locale = 'zh';//关键语句 // console.log('zh') } }).catch(() => { // console.log('catch'); this.$message({ type: 'info', }); }); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .top_btn{display: inline-block;padding: 0px 20px;} /* background: url(../assets/icon/loginout.png) left center no-repeat;padding-left: 20px; */ .out{display: inline-vlock;margin-left: 14px;} .out img{ 16px;position: relative;top:3px;} .header_warp{display: flex;align-items: center;height: 60px;line-height: 60px;color: #333333;background-color: #ffffff;padding: 0px 20px;box-shadow:10px 10px 3px -9px #adadad ;} .header_l{flex: 4;text-align: left;font-size: 22px;font-weight: 600;} .header_r{flex: 1;text-align: right;font-size: 14px;cursor: pointer;} .userImg{ 30px;height: 30px;border-radius: 15px;overflow: hidden;vertical-align: middle;margin-right: 10px;} </style>