当前位置:首页 > vue.js技术文章 > vue.js国际化 vue-i18n插件的使用详解

如何使用vue.js国际化 vue-i18n插件

  • 发布时间:
  • 作者:码农之家原创
  • 点击:151

这篇文章主要知识点是关于vue.js、vue-i18n、vue使用vue-i18n实现国际化的实现代码 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js实战

尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

查看详情

vue.js国际化 vue-i18n插件的使用详解

安装方法

1.使用CDN直接引用

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2.NPM

$ npm install vue-i18n

3.Yarn

$ yarn add vue-i18n

使用方法

在这里只介绍vue的使用方法

<script>
/* 国际化使用规则 */
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
 en: {
  message: {
   hello: 'world hello'
  }
 },
 zh: {
  message: {
   hello: '世界'
  }
 }
}

const i18n = new VueI18n({
 locale: 'zh',
 messages
})

export default {
 data () {
  return {
   hello: this.$t('message.hello')
  }
 },
 i18n
}

</script>

HTML

<div id="#app">
 <p>{{ $t("message.hello") }}</p>
</div>

vue-i18n插件使用参考文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

vue使用vue-i18n实现国际化的实现代码

需求

公司项目需要国际化,点击按钮切换中文/英文

1、安装

npm install vue-i18n --save

2、注入 vue 实例中,项目中实现调用 api 和 模板语法

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) ;

const i18n = new VueI18n({
  locale: 'zh-CN',  // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
  messages: {
   'zh-CN': require('./common/lang/zh'),  // 中文语言包
   'en-US': require('./common/lang/en')  // 英文语言包
  }
})

new Vue({
 el: '#app',
 i18n, // 最后
 router,
 template: '<App/>',
 components: { App }
})

3、对应语言包

zh.js中文语言包:

export const lang = {
 homeOverview:'首页概览',
 firmOverview:'公司概述',
 firmReports:'财务报表',
 firmAppendix:'更多附录',
 firmIndex:'主要财务指标',
 firmAnalysis:'对比分析',
 firmNews:'新闻事件档案',
 firmOther:'其他功能',
}

en.js 英文语言包:

export const lang = {
 homeOverview:'Home overview',
 firmOverview:'firmOverview',
 firmReports:'firmReports',
 firmAppendix:'firmAppendix',
 firmIndex:'firmIndex',
 firmAnalysis:'firmAnalysis',
 firmNews:'firmNews',
 firmOther:'firmOther'
}

4、按钮控制切换语言

this.$i18n.locale,当你赋值为‘zh-CN'时,导航栏就变成中文;当赋值为 ‘en-US'时,就变成英文:

<div class="top_btn" @click="changeLangEvent">中文</div>
changeLangEvent() {
  console.log('changeLangEvent');
  this.$confirm('确定切换语言吗?', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   if ( this.$i18n.locale === 'zh-CN' ) {
    this.$i18n.locale = 'en-US';//关键语句
    console.log('en-US')
   }else {
    this.$i18n.locale = 'zh-CN';//关键语句
    console.log('zh-CN')
   }
  }).catch(() => {
   console.log('catch');
   this.$message({
    type: 'info',
   });
  });
 }

5、模板渲染

静态渲染:

<span v-text="$t('lang .homeOverview')"></span>
<span>{{$t('lang .homeOverview')}}</span>

如果是element-ui 的,在要翻译的前面加上冒号

比如:label="用户姓名" 就改成 :label="$t('order.userName')"

动态渲染:

<span class="el-dropdown-link">{{navCompany}}</span>
 computed:{
   navCompany:function(){
    if(this.nav_company){
     let str = 'lang'+this.nav_company;
     return this.$t(str);
    }
   }
},
    
 <el-submenu
      v-for="(value, title1, one) in navList"
      :key="one+1"
      :index="(one+1).toString()">

   <template slot="title">
    <router-link :to="linkList[title1]">{{ getTitle(title1) }}</router-link>
   </template>
       
</el-submenu>

methods: {
  getTitle(title){
    let str = 'lang.'+title;
    return this.$t(str);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vuex的实例用法教程、 Vue2实现组件props双向绑定、 vue中的watch监听数据变化及、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:Vue 2.0 服务端渲染入门详解

下一篇:vue利用路由守卫判断是否登录的实例内容

展开 +

收起 -

使用vue-i18n插件 学习笔记
网友NO.848804

使用 vue-i18n 切换中英文效果

vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm) npm install vue-i18n 使用方法: 1、在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n'Vue.use(VueI18n) 2、准备本地的翻译信息 const messages = { zh: { message: { hello: '好好学习,天天向上!' } }, en: { message: { hello: 'good good study, day day up!' } }} 3、创建带有选项的 VueI18n 实例 const i18n = new VueI18n({ locale: 'en', // 语言标识 messages}) 4、把 i18n 挂载到 vue 根实例上 const app = new Vue({ router, i18n, ...App}).$mount('#app') 5、在 HTML 模板中使用 div id="app" h1 {{ $t("message.hello") }}/h1 /div 查看运行效果: 我们刚才选定的语言标识是 “en” 英语,现在改成 “zh” 中文,并查看效果 const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages}) 这样就可以轻松实现国际化了,实际开发……

网友NO.917146

vue项目中vue-i18n和element-ui国际化开发实现过程

在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行。element-ui插件自身也提供了语言包。具体的配置和使用方法参考如下: 默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及element-ui插件 cnpm i vue-i18n --save-dev cnpm i element-ui --save-dev 在项目文件中如下图,创建语言包文件夹i18n文件夹 在main.js用引入i18n.js,以及引入element-ui插件 import Vue from 'vue' import App from './App' import router from './router' // element-ui import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element) // vuei18n import i18n from './i18n/i18n' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, i18n, components: { App },……

网友NO.724784

利用vue-i18n实现多语言切换效果的方法

前言 有些项目我们需要支持多种语言切换,满足国际化需求。 vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。 安装vue-i18n 我们使用npm安装vue-i18n。 npm install vue vue-i18n --save 引入vue-i18n 首先在 main.js 中引入 vue-i18n。 import Vue from 'vue'import App from './App'import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 通过插件的形式挂载 接着创建带有选项的 VueI18n 实例。 const i18n = new VueI18n({ locale: localStorage.getItem('locale') || 'zh-CN', //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh-CN': require('./lang/zh'), // 中文语言包 'en-US': require('./lang/en') // 英文语言包 }}) 注意实例中加载了中英文两个语言包。分别准备两个语言包, 使用require引入到main.js中: 中文语言包:zh.js……

网友NO.912274

vue-i18n结合Element-ui的配置方法

使用方法: 在配合 Element-UI 一起使用时,会有2个问题: ####(1)、页面刷新后,通过按钮切换的语言还原成了最初的语言,无法保存 ####(2)、框架内部自带的提示文字无法更改,比如像时间选择框内部中的提示文字 关于第一个问题,可以在初始化VueI18n实例时,通过 localStorage 来为 locale 对象赋值 在切换语言的时候可以缓存不同的语言选项,并且可以长期保存,不会因为刷新网页而改变locale 的属性值 const i18n = new VueI18n({ locale: localStorage.getItem('locale') || 'zh', messages }) 关于第二个问题,更改Element 组件内部语言,这里还涉及到 手动处理 vue-i18n@6.x 兼容性问题。 http://element-cn.eleme.io/#/... 官网已经做了详细介绍,这里依葫芦画瓢跟着实现一下 ###i18n.js import Vue from 'vue' import VueI18n from 'vue-i18n' import locale from 'element-ui/lib/locale'; import zh from './langs/zh' import en fr……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757