Vue 实现中/英语言切换功能

本文基于 Vue2＋element-ui ，实现多语言切换功能，本文介绍了整体配置以及分文件编写配置两种配置方式。

插件安装

如果采用 Vue2 版本，在你的项目根目录下运行以下命令安装 vue-i18n 插件：

   npm install vue-i18n

配置插件

整体配置

1. 配置vue-i18n插件：
   在你的 main.js 文件中，你需要初始化 VueI18n 并将它添加到 Vue 实例中：

   import Vue from 'vue'
   import VueI18n from 'vue-i18n'
   
   Vue.use(VueI18n)
   
   const messages = {
     en: {
       message: {
         hello: 'hello world'
       }
     },
     zh: {
       message: {
         hello: '你好，世界'
       }
     }
   }
   
   const i18n = new VueI18n({
     locale: 'en',  // 设置默认语言
     messages
   })
   
   new Vue({
     i18n,
     render: h => h(App)
   }).$mount('#app')

在这个例子中，我们定义了两种语言：英文（‘en’）和中文（‘zh’）。每种语言都有一个 ‘hello’ 消息。

分文件配置

文件目录：

--src
   -- language
      -- index.js
      -- zh.js
      -- en.js
   -- components
      --Helloword.vue
   -- main.js

• index.js ：vue-i18n 插件配置文件
• zh.js：中文翻译包
• en.js：英文翻译包
• Helloword.vue：展示页面

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n' //引入vue-i18n组件
import zh from './zh';
import en from './en';

Vue.use(VueI18n)
//注册i18n实例并引入语言文件
const i18n = new VueI18n({
  
    locale: 'zh', // 语言标识（缓存里面没有就用中文）
    fallbackLocale:'en' , //没有英文的时候默认中文语言
    messages: {
        zh,
        en
    }
});
export {i18n}

zh.js

export default {
    message: {
         hello: '你好 世界'
       }
}

en.js

export default {
    message: {
         hello: 'hello world'
       }
}

main.js

// 引入中英语言切换包
import  {i18n}  from './language/index.js'

Vue.config.productionTip = false
//使用ElementUI
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

使用方法

完成插件的配置之后，在 Vue 组件中使用 &t 方法获取相应的语言

   <template>
     <p>{{ $t('message.hello') }}</p>
   </template>

切换语言

通过更改 locale 属性来切换语言

   this.$i18n.locale = 'zh';

案例

本案例基于 Elementui 实现点击按钮切换中/英文语言，配置如上分文件配置所示。
Helloword.vue

<div class="langpage">
	<el-button @click="changelang">切换语言</el-button>            
</div>
<script>
export default {
	data () {
	    return {
	      
	    }
	  },
	methods: {
	changelang:function(){
        this.$i18n.locale == 'zh'? this.$i18n.locale = 'en': this.$i18n.locale = 'zh'
      }
	}
}
</script>