1.安装国际化的包

npm i vue-i18n@8.22.2

2.多语言配置

这里拿element-ui 的语言包举例

1.导入文件与插件包并全局注册

2.创建i18n实例并配置

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
import customZH from './zh'
import customEN from './en' // 引入自定义的语言文件
Vue.use(VueI18n) // 全局注册国际化包// 创建国际化插件的实例
const i18n = new VueI18n({// 指定语言类型 zh表示中文  en表示英文locale: 'zh',// 将elementUI语言包加入到插件语言数据里messages: {// 英文环境下的语言数据en: {...elementEN,...customEN},// 中文环境下的语言数据zh: {...elementZH,...customZH}}
})
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))export default i18n

3.main.js中引入并挂载

3.使用

例:

<template><el-dropdown trigger="click" @command="changeLanguage"><div><svg-icon style="color:#fff;font-size:20px" icon-class="language" /></div><el-dropdown-menu slot="dropdown"><el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item><el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>
export default {methods: {changeLanguage(lang) {this.$i18n.locale = lang // 设置给本地的i18n插件this.$message.success('切换多语言成功')}}
}
</script>

2.上面可以通过一个方法改变locale的配置

3.修改模板渲染

这里的$t是引入了i18n之后，自动挂载在vue实例上的功能。小括号里面的是字符串

Vue项目国际化多语言相关推荐

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包
如何让一个vue项目支持多语言(vue-i18n) 1.安装:npm install vue-i18n --save 2.在main.js中引入vue-i18n import VueI18n from ...
vue项目国际化(使用vue-i18n)
最近一个优先级高的任务--将之前的vue项目全局国际化,时间紧急虽然付出了较多的努力,但因为不够细心,导致出现单词拼错.翻译缺漏等错误,还有翻译过后因中英文字符长度差异产生的样式问题,上线效果并不理想 ...
vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~
1.安装配置 - 安装 $ npm install vue-i18n 或者: <script src="https://unpkg.com/vue/dist/vue.js"& ...
vue项目中英文切换（多语言国际化）-- i18n插件的用法
1.安装 npm install vue-i18n --save 2.在main.js文件中: import i18n from './i18n/i18n'//我是把i18n单独放一个文件夹,这里是引 ...
Vue项目如何实现国际化？分享一下基于vue-i18n实现国际化的经验
vue项目如何实现国际化?分享一下基于vue-i18n实现国际化的经验 demo源码链接:https://github.com/XieTongXue/how-to/tree/master/vue-in ...
html引vue怎么实现国际化,Vue项目中Vue-i18n和element-ui国际化开发实现过程_唇印_前端开发者...
在开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如 ...
项目国际化I18N多语言切换
作为国际化的门户网站,支持多种不同的语言,以方便不同国家,不同语种的用户访问尤其重要,目前通过Vue I18n已实现中英文自由切换. 一.了解I18N 1.什么是I18N i18n(其来源是英文单词 ...
vue 使用vue-i18n 国际化，语言切换功能
最近项目中要使用到语言切换这一功能,遂百度一番,发现使用vue-i18n即可以实现项目国际化. 1. 首先安装vue-i18n npm install vue-i18n 2 在main.js里面引用 ...
vue中开发多语言（国际化）,vue+i18n（详细教程）
目录第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...

Vue项目国际化多语言

1.安装国际化的包

2.多语言配置

3.使用

Vue项目国际化多语言相关推荐

最新文章

热门文章