本文共 2179 字，大约阅读时间需要 7 分钟。

1、 安装语言包

npm install vue-i18n

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

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 langimport elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui langimport elementEsLocale from 'element-ui/lib/locale/lang/en'// element-ui langimport 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 静态渲染

   	
   
    {
   {
   $t('sceneHome.start')}}
   

4.2 动态渲染

 {
   {
    getTitle(item.name) }}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、语言切换

       
    
       
            
          
    
     
           
     
               中文       
            
     
               English       
          
       
   

转载地址：http://xnxxi.baihongyu.com/