vue-element-admin 中使用国际化

1、 安装语言包

npm install vue-i18n

2、安装完成后，在项目中新建文件夹和文件，如下：

index.js (js-cookie 是在项目中已安装的)

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 elementEsLocale from 'element-ui/lib/locale/lang/en'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
    
    
  en: {
    
    
    ...enLocale,
    ...elementEsLocale
  },
  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 'zh'
}
const i18n = new VueI18n({
    
    
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages
})

export default i18n

zh.js

module.exports = {
    
    
  sceneHome: {
    
    
    start: '开始测试'
  },
  login: {
    
    
    title: '登录'
  },
  content: {
    
    
    main: 'main'
  }
}

en.js

module.exports = {
    
    
  sceneHome: {
    
    
    start: 'start test'
  },
  login: {
    
    
    title: 'login'
  },
  content: {
    
    
    main: 'main'
  }
}

3、在main.js 中注入

import i18n from './assets/lang'

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

4、在项目中使用

4.1 静态渲染

  	<el-button v-text="$t('sceneHome.start')"></el-button>
	<el-button>{
    
    {
    
    $t('sceneHome.start')}}</el-button>

4.2 动态渲染

 <span v-for="(item, index) in arrData" key='index'>
 {
    
    {
    
     getTitle(item.name) }}
</span>

methods: {
    
    
    getTitle(title){
    
    
        let str = 'lang.'+title;
        return this.$t(str);
    }
}

4.3 js和data 中的渲染

 data() {
    
    
      return{
    
    
        ruleForm: {
    
    
          name: '1',
        },
        rules: {
    
    
          name: [
            {
    
     required: true, message: this.$t('sceneEdit.formNameTip'), trigger: 'blur' }
          ],
        }
      }
    }

5、语言切换

  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
       <!--<svg-icon class-name="international-icon" icon-class="language" />-->
       <i class="el-icon-s-tools"></i>
     </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item :disabled="language==='zh'" command="zh">
         中文
       </el-dropdown-item>
       <el-dropdown-item :disabled="language==='en'" command="en">
         English
       </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>



<script>	

 handleSetLanguage(lang) {
    
    
   this.$i18n.locale = lang
  },
</script>