1.下载i18n  

npm install --save vue-i18n

2.配置zh.js和en.js文件，写入需要转化的内容

en.js

module.exports = {
  i18n: {
    title: 'Digital RMB exchange machine',
    InitializationPage: {
      remindContent: 'Page initializing, please wait...'
    },
    languagePage: {
      ChineseBtn: 'Chinese',
      EnglishBtn: 'English',
      dialogTips: {
        title: 'Tips',
        content: 'The system will use English language. Do you want to continue?',
        confirmButtonText: 'confirm',
        cancelButtonText: 'cancel'
      }
    },
    homePage: {
      functionBtn1: 'deposit in soft Wallet',
      functionBtn2: 'deposit in Hard Wallet'
    }
  }
}

zh.js

module.exports = {
  i18n: {
    title: '数字人民币兑换机',
    InitializationPage: {
      remindContent: '页面正在初始化，请稍等...'
    },
    languagePage: {
      ChineseBtn: '中 文',
      EnglishBtn: 'English',
      dialogTips: {
        title: '提 示',
        content: '系统将使用中文语言, 是否继续?',
        confirmButtonText: '确 定',
        cancelButtonText: '取 消'
      }
    },
    homePage: {
      functionBtn1: '外币兑换存入软钱包',
      functionBtn2: '外币兑换存入硬钱包'
    }
  }
}

 3.在main.js中引入

import VueI18n from 'vue-i18n'
import en from '../renderer/assets/lang/en'
import zh from '../renderer/assets/lang/zh'

Vue.use(VueI18n)

// 创建VueI18n实例
const i18n = new VueI18n({
  locale: 'zh', // 语言标识,默认中文
  messages: {
    'zh': {...zh},
    'en': {...en}
  },
  silentTranslationWarn: true // 去除国际化警告
})

new Vue({
  components: {
    App
  },
  router,
  store,
  i18n,
  template: '<App/>'
}).$mount('#app')

注意：en.js和zh.js文件路径

4.页面使用

在template中直接使用

 

 5.切换语言

   chooseChinese() {
      this.$i18n.locale = 'zh'
    },
    chooseEnglish() {
      this.$i18n.locale = 'en'
    },