vue-i18n国际化设置方法

在实际开发中，我们经常遇到的前端页面国际化问题，其实就是切换语言模式，说国际化，简直过于夸张了；在vue项目中，推荐使用vue-i18n插件进行语言切换模式处理。

注意：
*放在data里面的数据无法自动更新目标语言时，需要将循环的数据放到html中渲染，js中无法自动更新

<Dropdown @on-click="handleClick">
    <Avatar size="32" :src="userAvatar"/>
    <Icon :size="18" type="md-arrow-dropdown"></Icon>
    <DropdownMenu slot="list">
        <DropdownItem :name="item.name" v-for="(item,index) of menuList" :key="index">
            {{$t(item.title)}}
        </DropdownItem>
    </DropdownMenu>
</Dropdown>

data(){
   return{
        menuList: [
            {name: 'personal',title:'page.head.user'},
            {name: 'password',title:'page.head.updatePassword'},
            {name: 'logout',title:'page.head.logout'},
        ]
    }
  },

*表单验证错误信息提示无法自动更新目标语言的问题：需要将验证信息放到computed钩子函数中即可

 <FormItem prop="password" >
            <Input type="password" v-model="form.password" autocomplete="off"
   :size="size" :placeholder="$t('login.password')" />
    <i class="icon iconmima1"></i>
</FormItem>

computed: {
   rules(){
        return{
            username: [
                { required: true, message: this.$t("login.nameTip"), trigger: 'blur' }
            ],
            password: [
                { required: true, message: this.$t('login.passwordTip'), trigger: 'blur' }
            ]
        }
    }
},

1、安装vue-i18n

npm install vue-i18n

2、在main.js中引入vue-i18n

//语言类型js
import i18n from '~components/lang'

Vue.use(ViewUI,{
    i18n: (key, value) => i18n.t(key, value)
});

window.vm = new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
}).$mount('#app')

3、创建文件。英语：en.js 中文：zh.js 配置文件index.js和i18n.js

en.js

export default {
   login:{
      langType:'English',
      pwdLogin:'Password login',
      smsLogin:'SMS login'
   }
}

zh.js

export default {
    login:{
        langType:'简体中文',
        pwdLogin:'密码登录',
        smsLogin:'短信登录'
     }
}

index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from './en'
import zhLocale from './zh'
import enUsLocale from 'view-design/src/locale/lang/en-US';
import zhCnLocale from 'view-design/src/locale/lang/zh-CN';
import localStore from '~script/localStore';

Vue.use(VueI18n);

const navLang = navigator.language;
const localLang = (navLang == 'zh-CN' || navLang == 'en-US') ? navLang : false;
let lang = localStore.get('language') || localLang || 'zh-CN'; //zh-CN 默认中文

Vue.config.lang = lang;

// 多语言配置 vue-i18n 6.x+
Vue.locale = () => { };
const messages = {
    'zh-CN': Object.assign(zhLocale, zhCnLocale),
    'en-US': Object.assign(enLocale, enUsLocale)
};
const i18n = new VueI18n({
    locale: lang,
    messages,
    silentTranslationWarn: true
});

export default i18n;

i18n.js（注意：这个是专门用作路由国际化一个方法）

// translate router.meta.title, be used in breadcrumb sidebar tagsview
export function generateTitle(title) {
  const hasKey = this.$te('route.' + title)
  if (hasKey) {
    // $t :this method from vue-i18n, inject in @/lang/index.js
    const translatedTitle = this.$t('route.' + title)
    return translatedTitle
  }
  return title
}

使用方法：
//菜单页面导入
import { generateTitle } from '~script/i18n';

//菜单页面引用：
{{ generateTitle(item.meta.title)}}
//菜单页面
methods:{
	generateTitle
},

4、在store.js文件中写获取语言和重置语言的逻辑

// 状态
const state ={
	language:LocalStore.get('language') || navigator.language
};

// 类似于computed
const getters = {
	language:state=>{
		return state.language || LocalStore.get('language');
	}
};

const mutations = {
	updateLangType(state,params){
	   LocalStore.set('language',params);
	   state.lang = params;
	}
};

5、调用国际化

<div class="lang_box">
	<Icon type="ios-globe-outline" />
	<Dropdown @on-click="getLangType">
		 {{$t("login.langType")}}
		<Icon type="ios-arrow-down"></Icon>
		<DropdownMenu slot="list" >
			<DropdownItem name="en-US">English</DropdownItem>
			<DropdownItem name="zh-CN">简体-中文</DropdownItem>
		</DropdownMenu>
	</Dropdown>
</div>

//方法
//切换语言
getLangType(lang){
	console.log(lang);
    this.$i18n.locale = lang;
	this.$store.commit('updateLangType',lang);
	this.$Message.success('Switch Language Success');
},

// 回显选择语言
<ul class="server_ul">
<li @click="handleClick(0)" :class="section.type==0?'active':''">{{ $t("login.pwdLogin") }}</li>
<li @click="handleClick(1)" :class="section.type==1?'active':''">{{ $t("login.smsLogin") }}</li>
</ul>