900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue实现多语言开发(中英文切换)

vue实现多语言开发(中英文切换)

时间:2019-07-29 23:44:55

相关推荐

vue实现多语言开发(中英文切换)

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。