使用vue-i18n实现切换中英文

一、在使用之前先安装:

npm install --save vue-i18n

二、在main.js进行引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import VueI18n from 'vue-i18n';
//引入写好的语言包 看不懂往下看
import {
      messages } from './components/common/i18n';
Vue.config.productionTip = false

// 通过插件的形式挂载
Vue.use(VueI18n);

const i18n = new VueI18n({
     
  locale: 'zh',  // 语言标识
  messages   // 通过切换 locale 的值来实现语言切换 
  /*可以是一个对象 
  { js 方式
     'zh': require('@/plugins/lang/zh'),   // 中文语言包
     'en': require('@/plugins/lang/en')    // 英文语言包
   }
   **/
});
// 一定要在这里写上
new Vue({
     
  router,
  store,
  i18n,   //不要忘记
  render: h => h(App)
}).$mount('#app')

三、使用之前定义要进行翻译的内容

我只用了一个文件写内容比较少就没有分开 内容多可以中英文分开文件

en.js 英文语言包
zh.js 中文语言包

创建一个translator.js文件

export const messages = {
     
    'zh': {
     
        i18n: {
     
            breadcrumb: '国际化产品',
            tips: '通过切换语言按钮，来改变当前内容的语言。',
            btn: '切换英文',
            title1: '常用用法',
            p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。',
            p2: '没有什么比信念更能支撑我们度过艰难的时光了。',
            p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。',
            title2: '组件插值',
            info: 'Element组件需要国际化，请参考 {action}。',
            value: '文档'
        }
    },
    'en': {
     
        i18n: {
     
            breadcrumb: 'International Products',
            tips: 'Click on the button to change the current language. ',
            btn: 'Switch Chinese',
            title1: 'Common usage',
            p1: "If you reveal your secrets to the wind you should not blame the wind for  revealing them to the trees.",
            p2: "Nothing can help us endure dark times better than our faith. ",
            p3: "If you can do what you do best and be happy, you're further along in life  than most people.",
            title2: 'Component interpolation',
            info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.',
            value: 'documentation'
        }
    }
}

四、如何使用以及点击实现翻译

通过触发事件的形式，来控制 locale 的值，去调用对应的语言包就可以实现国际化

点击按钮 点击看locale的值是中文吗是就输出英文 不然就输出中文

@click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';"

这个是相对好看一点的按钮实现翻译

/**
 * 切换语言 
 */ 
 changeLangEvent() {
     
   this.$confirm('确定切换语言吗?', '提示', {
     
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
    }).then(() => {
     
       if ( this.lang === 'zh' ) {
     
          this.lang = 'en';
          this.$i18n.locale = this.lang; // 关键语句
       }else {
     
          this.lang = 'zh';
          this.$i18n.locale = this.lang; // 关键语句
       }
    }).catch(() => {
     
       this.$message({
     
           type: 'info',
       });          
    });
}

vue 中对于文字数据的渲染

<h2>{
     {
     $t('i18n.title1')}}</h2>
<h2>{
     {
     $t('i18n.title2')}}</h2>

js 获取

console.log(this.$t('i18n.title1'));