1.搭建国际化

1.1 安装vue-i18n

npm install vue-i18n

安装成功package.json显示：

image.png

1.2 创建配置文件

image.png

• cn.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
  usm:{
    role:{
      new:'新建',
      update:'修改',
      del:'删除',
      queryUser:'查看人员'
    }
  },
  ...zhLocale
}
export default cn;

• en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    usm:{
        role:{
            new:'new',
            update:'update',
            del:'delete',
            queryUser:'queryUser'
        }
    },
  ...enLocale
}
export default en;

• ja.js

import jaLocale from 'element-ui/lib/locale/lang/ja'
const ja = {
    usm:{
        role:{
            new:'追加',
            update:'変更',
            del:'削除',
            queryUser:'照会員'
        }
    },
  ...jaLocale
}
export default ja;

• index.js

import en from './en'
import cn from './cn'
import ja from './ja'
export default {
  en,
  cn,
  ja,
}

• i18n.js

import Vue from 'vue';
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n';
import messages from './langs';
Vue.use(VueI18n);
//默认中文
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages,
})
//兼容element插件的多语言切换
locale.i18n((key, value) => i18n.t(key, value)) 

export default i18n

1.3 main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import i18n from './i18n/i18n'//引入国际化
import App from './App'
import store from './store'
import router from './router'

new Vue({
    el: '#app',
    router,
    i18n,//国际化
    store,
    render: h => h(App)
})

1.4 页面代码

• vue变量{{$t('usm.role.new')}}

<el-button
     key="0102010401"
     ref="creatRole"
     v-permission:0102010401="userPermissions"
     type="primary"
     @click="createRole"
     >{{$t('usm.role.new')}}</el-button>

• js控制

<span style="display:block;" @click="handleCommand('cn')">中文</span>
<span style="display:block;" @click="handleCommand('en')">English</span>
<span style="display:block;" @click="handleCommand('ja')">日本語</span>

handleCommand(lang){
        this.$i18n.locale = lang;
        localStorage.setItem("lang", lang);
     }

2. 项目

xiang_workspace --> vuei18n