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'},