vue+elementUI使用i18n详情

vue+elementUI使用i18n详情

下载i18n

npm install vue-i18n --save

1.在src中创建i18n文件

2.在i18n文件中创建index.js 、en.js、ch.js 三个文件

index.js 的配置

import Vue from 'vue'
import locale from 'element-ui/lib/locale' //引入elemUI中的locale实现切换
import VueI18n from 'vue-i18n'
// 引入各个语言配置文件
import en from './en'
import ch from './ch'
Vue.use(VueI18n)
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
  // 设置默认语言
  locale: localStorage.getItem('locale') || 'en', // 语言标识
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    en,
    ch
  }
})

locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换

// 暴露i18n
export default i18n

en.js 文件配置 （注：该文件为英文配置文件）

// Element英文样式
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  // 登录页
  login: {
    username: 'Username',
    password: 'Password',
    title: 'Visitor Booking Portal',
    login: 'Sign in',
    userTip: 'Please enter username',
    passTip: 'Please enter password',
  }
    ...enLocale
}

export default en

ch.js 文件配置（注：该文件为中文配置文件）

// Element中文样式
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const ch = {
    // 登录页
    login: {
        username: '账号',
        password: '密码',
        title: '访客系统管理端',
        signIn: '登录',
        userTip: '请填写账号名称',
        passTip: '请填写密码',
    },
    ...zhLocale
}

export default ch

3.将i18n挂载到vue中

main.js

import i18n from "./i18n";
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

4.页面中使用

//vue组件模板的使用
<div>{{$t('login.username')}}</div>
 
//vue组件模板数据绑定的使用
<input :placeholder="$t('login.username')"></input>
 
//vue组件data中赋值的使用
data:{
 msg:this.$t('login.username');
}