vue——vue-i18n

vue 项目中如何实现国际化 vue-i18n

安装

npm install vue-i18n

引入

import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({locale: 'zh',    // 语言标识//this.$i18n.locale // 通过切换 locale 的值来实现语言切换messages: { // js 方式'zh': require('@/plugins/lang/zh'),   // 中文语言包'en': require('@/plugins/lang/en')    // 英文语言包}//messages: { // json 方式//  'zh': require('@/plugins/lang/zh.json'),   // 中文语言包//  'en': require('@/plugins/lang/en.json')    // 英文语言包//}
})/* eslint-disable no-new */
new Vue({el: '#app',i18n,  // 不要忘记store,router,template: '<App/>',components: { App }
})

使用

语言包

en.js 英文语言包

// json
{"main": {"title": "me"}
}// js
export const main = {title: "me"
}

zh.js 中文语言包

//json
{"main": {"title": "我"}
}// js
export const main = {title: "我"
}

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

组件中的一个点击事件进行切换

/*** 切换语言 */ 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 中对于文字数据的渲染

<span v-text="$t('main.title')"></span>
<span>{{$t('main.title')}}</span>// js 获取
this.$t('main.title')

vue——vue-i18n相关推荐

vue中warning_使用vue的i18n 出现很多warning提示
问题描述使用vue的i18n 出现很多warning提示 Module parse failed: Unexpected token (1:10) You may need an appropria ...
vue require css html,requirejs vue vue.router简单框架
index.html 入口页面html> vue `menu`.`name` base.js requirejs 配置文件(function(){ requirejs.config({ ...
[vue] vue组件里的定时器要怎么销毁？
[vue] vue组件里的定时器要怎么销毁? const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在bef ...
[vue] vue组件会在什么时候下被销毁？
[vue] vue组件会在什么时候下被销毁? 页面关闭.路由跳转.v-if和改变key值个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
[vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么? 需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏个人简介我是歌谣,欢迎和大家一起交流前后 ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
[vue] vue的is这个特性你有用过吗？主要用在哪些方面？
[vue] vue的is这个特性你有用过吗?主要用在哪些方面? vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题<ul><li is='my-compon ...
[vue] vue的:class和:style有几种表示方式？
[vue] vue的:class和:style有几种表示方式? :class 绑定变量绑定对象绑定一个数组绑定三元表达式 :style 绑定变量绑定对象绑定函数返回值绑定三元表达式个人简 ...
[vue] vue怎么改变插入模板的分隔符？
[vue] vue怎么改变插入模板的分隔符? optionMergeStrategies类型:{ [key: string]: Function }默认值:{}用法:Vue.config.option ...
[vue] vue如何优化首页的加载速度？
[vue] vue如何优化首页的加载速度? 补充下2楼: ssr直出, webpack压缩HTML/CSS/JS, 首屏css单独提取内联, 关键资源Proload, 图片:不缩放,使用webp.小图 ...

vue——vue-i18n

安装

引入

使用

语言包

组件中的一个点击事件进行切换

vue——vue-i18n相关推荐

最新文章

热门文章