一、前言

4k广告机需要多语言切换。此时有无数的前端框架，其中几个流行的框架都有匹配的国际化插件工具。例如：

Vue vue-i18n angular-translate react-intljquery jquery . i18n的前框架4K广告机项目使用的属性是Vue，所以我们将使用Vue-i18n作为插件来实现国际化功能。

二、最终效果

第三，实现国际化

1.首先在自己的项目中安装vue-i18n依赖包。这里安装用的是NPM，如果没有科学的互联网接入，安装用的是CNPM。

NPM安装vue-i18n-save-dev2，将i18n引入vue实例，并在项目中实现调用API和模板语法。现在将vue-i18n引入main.js

从' vue-i18n' /导入vue-i18n/引入vue-i18n vue . use(vue i18n)；//以插件的形式挂载/*-基本使用-*/const i18n=new vue i18n({ locale : ' cn '，//语言id messages : { en : { messages : { hello 3360 ' hello world ' } } })，Cn : { messages : { hello : ' hello，world ' } })/*-使用语言包*/const i18n=0$i18n.locale //通过切换locale message : { ' zh ' : require('的值来实现语言切换。/common/lang/zh ')，//中文语言包' en' : require('。/common/lang/en ')//英语语言包} })/* ESL int-disable no-new */new vue({ El 3360 ' # app '，i18n，//已安装到实例，并且必须位于此位置。上述代码将vue-i18n正式引入vue项目，并创建了一个i18n实例对象，便于全局调用。我们用这个。$i18n.locale用于切换语言。

3.接下来，我们需要创建两个js文件(或josn文件)作为语言包。

其中en.js语言包中的代码为：

module . exports={ message : { Login : ' log in '，Username: 'Username '，Password: 'Password '，Captcha: 'Captcha '，Language :' language '，zh:' Chinese '，en:' English'}}其中zh.js语言包中的代码为：

module . exports={ message : { login 3360 ' log in '、Username:' user name '、Password:' password '、Captcha: '验证码'、Language:' language '、zh:' Chinese '、En:' English'}}最后我们只需要以触发事件的形式控制区域设置的值，并调用相应的语言包实现国际化。

4.组件中的触发器事件切换区域设置的值，从而实现语言切换。模板代码：

div class=' lang ' El-radio-group v-model=' language ' size=' mini ' El-radio v-for=' item of lang ' : label=' item '。“value”边框{{item。标签} }/El-radio/El-radio-group/div scrip

从“vue”导入Vue导出默认{ mounted() { this。$i18n.locale==='zh '？这个。语言=0 :这个。language=1//加载数据时，判断其目前属于哪种语言，并为其单选按钮赋值}、data() {return {language: 0，Lang: [{label:this。$ t ('message.zh ')，//模板语法的值： { 0 }，{label:this。$ t ('message.en ')，value3360 1}]，} } }，watch : {//Listener language : function(val){//听听单选按钮的变化，从而切换语言val===0？这个。$i18n.locale='zh' : this。$ i18n.locale=' enVue.set(this.lang，0，{label: this。$t('message.zh ')，值： { 0 })；Vue.set (this.lang，1，{label: this。$ t ('message.en ')，value : 1 })/* * this . lang :[{ label 3360 this。$ t ('message.zh ')，//如果不使用vue，还可以使用更新数据值的方法： 0}，{label: this。$ t ('message.en ')，value: 1}] * */}}。}注意：由于JavaScript的限制，Vue无法检测到当前变化的数组，只能渲染一次。如果数据不更新视图，就不会更新组件。如果您切换语言，您需要更新它。

四.vue-i18n数据渲染的模板语法

模板语法暂时分为三种类型：

//vue组件模板的用法div { { $ t(' message . zh ')} }/div//vue组件模板数据绑定的用法input:占位符=' $ t(' message . zh ')'/input//在vue组件数据{ msg : this }中分配的用法data3360。$ }五、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”/导入zh locale从“Element-UI/lib/locale/lang/zh-cn”/导入Element UI的中文包Vue . use(Vue i18n)；Vue.use(ElementUI，{ i18n:(键，值)=i18n.t(键，值)})；//兼容i18n 7.x版本设置const i18n=new vue i18n({ locale : ' zh '，//语言标识符messages : { zh 3360 object . assign(require(' @/components/common/lang/zh ')，//这里要注意如何导入多个语言包的en : object . assign(require(' @/components/common/lang/en ')、enlo cale)})。注意：关于导入多个语言包时遇到的问题，我在Element UI的国际化文档中找到了解决方案。

第六，路由和面包屑导航国际化的语法问题

不知道面包屑导航怎么国际化。我在网上看了一些资料，得到了下面的代码完美的解决了这个问题：router.js(路由配置文件)

{path:'/index '，name:' nav.home '，//直接指出对应的文本组件3360(resolve)=require([' @/components/index ']，resolve)} breadcrumb.vue(面包屑导航组件)

div id='面包屑' El-面包屑分隔符-class=' El-icon-arrow-right ' El-面包屑-item : to=' { path : '/index ' } ' { { $ t(' nav。home ')} }/El-bread crumb-item/* note { { $ t(item。name)} } */El-bread crumb-item v-for=' item in $ route。将“:”匹配到=“{ path 3360”项。路径“{ 0 }”(项。名字

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。