本文主要介绍vue如何利用i18n实现国际化的相关信息。通过示例代码进行了非常详细的介绍，对大家学习或使用vue有一定的参考价值。和有需要的朋友一起学习吧。
一、前言
需要在4k广告机中实现多语言切换。此时前端框架众多，其中几个流行的框架都有匹配的国际插件工具。例如：
vue vue-i18n
角度-角度平移
反应反应国际
jquery jquery.i18n.property
4K广告机项目使用的前端框架是Vue，所以我们将使用vue-i18n插件来实现国际化功能。
二、最终实现效果
三、国际化的实现
1.首先，在自己的项目中安装vue-i18n依赖包。在这里，NPM用于安装。如果没有科学上网，请使用CNPM进行安装。
npm安装vue-i18n -保存-开发
2.将i18n引入vue实例，在项目中实现调用API和模板语法。现在在main.js中介绍vue-i18n
从“vue-i18n”//import vue-i18n导入VueI18n
vue . use(vue i18n)；//将其作为插件挂载
/* - */
const i18n=new VueI18n({
区域设置：“CN”，//语言ID
消息：{
恩：{
消息：{
你好：“你好，世界”
}
},
cn: {
消息：{
你好：“你好，世界”
}
}
}
})
/* - */
const i18n=new VueI18n({
区域设置：“zh”，//语言ID
//这个。$i18n.locale //通过切换locale的值实现语言切换
消息：{
Zh ':要求('。/common/lang/zh ')，//中文语言包
' En ':要求('。/common/lang/en ')//英语语言包
}
})
/* eslint-禁用no-new */
新Vue({
埃尔：' #app '，
I8n，//安装到实例中，并且它必须在这个位置，而不是在组件中。
模板：“App/”，
组件：{
应用
}
});
上面的代码将vue-i18n正式引入vue项目，创建一个i18n实例对象，方便全局调用。我们通过这个来转换语言。$i18n.locale
3.接下来，我们需要创建两个新的js文件(或josn文件)作为语言包。
en.js语言包中的代码是：
模块.导出={
消息：{
登录：“登录”，
用户名：“用户名”，
密码：“密码”，
验证码：“验证码”，
语言：“语言”，
张：“中国人”，
恩：“英语”
}
}
zh.js语言包中的代码是：
模块.导出={
消息：{
登录：“登录”，
用户名：“用户名”，
密码：“密码”，
验证码：“验证码”，
语言：“语言”，
张：“中国人”，
恩：“英语”
}
}
最后，我们只需要通过触发事件来控制locale的值，调用相应的语言包来实现国际化。
4.组件中的触发事件切换locale的值，从而实现语言切换。模板代码：
div class='lang '
El-radio-group v-model=' language ' size=' mini '
El-radio v-for=' item of lang ':label=' item . value ' border { { item . label } }/El-radio
/el-radio-group
/div
Scrpit代码：
从“vue”导入Vue
导出默认值{
已安装(){
这个。$i18n.locale==='zh '？this . language=0:this . language=1//加载数据时，判断当前属于哪种语言，为其单选按钮赋值。
},
data() {
返回{
语言：0，
郎：[{
标签:这个。$t('message.zh ')，//一种模板语法
值：0
}, {
标签:这个。$t('message.en ')，
值：1
}],
}
},
观察：{//监听器
Language: function (val) {//监听单选按钮的变化，从而切换语言。
val===0？这个。$i18n.locale='zh ':这个。$ i18n.locale=' en
Vue.set(this.lang，0，{label: this。$t('message.zh ')，值：0 })；
Vue.set(this.lang，1，{label: this。$t('message.en ')，值：1})
/**
this.lang: [{
标签:这个。$t('message.zh ')，//如果不使用Vue.set，也可以使用更新数据的方法。
值：0
}, {
标签:这个。$t('message.en ')，
值：1
}]
**/
}
},
}
注意：由于JavaScript的限制，Vue无法检测到当前变化的数组，只能渲染一次。如果数据没有更新视图，组件将不会更新。如果切换语言，您需要更新数据以在组件内切换多种语言。
四、vue-i18n 数据渲染的模板语法
模板语法暂时分为三种类型：
//使用//vue组件模板
div{{$t('message.zh')}}/div
//使用//vue组件模板的数据绑定
input:placeholder=' $ t(' message . zh ')'/input
//赋值在//vue组件数据中的使用
数据：{
味精：这个。$ t(' message . zh ')；
}
五、Element UI组件库与vue-i18n的兼容问题
由于项目中使用了Element UI组件库，其中的一些内置字也需要国际化。幸运的是，Element UI有国际化支持。但是Element UI默认只兼容vue-i18n的5.x版本，现在vue-i18n的版本已经到了7.x，在Element UI官方文档的“国际化”一节中有具体的解释。粘贴下面的手动设置：
从“vue”导入Vue
从“element-ui”导入ElementUI
从“vue-i18n”导入VueI18n
从' Element-ui/lib/locale/lang/en '//English包中导入区域设置以引入元素UI
从元素ui的“Element-UI/lib/locale/lang/zh-cn”//Chinese包中导入区域设置
vue . use(vue i18n)；
Vue.use(ElementUI，{
i18n:(键，值)=i18n.t(键，值)
});//兼容i18n 7.x版本设置
const i18n=new VueI18n({
区域设置：“zh”，//语言ID
消息：{
zh:object . assign(require(' @/components/common/lang/zh ')，zhlocale)，//这里要注意如何导入多个语言包。
en:object . assign(require(' @/components/common/lang/en ')、enLocale)，
}
});
注意：关于导入多个语言包时遇到的问题，我在Element UI的国际化文档中找到了解决方案。
六、路由与面包屑导航国际化的语法问题
不知道面包屑导航如何国际化？在网上翻了一些资料，得到了下面的代码，完美解决了问题：
Router.js(路由配置文件)
{
路径：“/index”，
名字：“导航”。Home '，//直接指出相应的文字
component:(resolve)=require([' @/components/index ']，resolve)
}
Breadcrumb.vue(面包屑导航组件)
div id='Breadcrumb '
el-breadcrumb分隔符-class='el-icon-arrow-right '
El-bread crumb-item:to=' { path:'/index ' } ' { { $ t(' nav。Home')}}/el-breadcrumb-item
/* Note {{$t(item.name)}}*/
El-bread crumb-item v-for=' item in $ route . matched ':to=' { path:item . path } ' { { $ t(item . name)} }/El-bread crumb-item
/el-breadcrumb
/div
七、至此，国际化的坑算是踩完了。
总结
这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。谢谢你的支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。