vue，使用vue-i18n实现国际化

jsummer 发布于2019-08-22 16:05 / 986人阅读

摘要：需求公司项目需要国际化，点击按钮切换中文英文安装注入实例中，项目中实现调用和模板语法语言标识通过切换的值来实现语言切换中文语言包英文语言包最后对应语言包中文语言包首页概览公司概述财务报表更多附录主要财务指标对比分析新闻事件档案

需求

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

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: "",
  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’时，就变成英文：

中文
 
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",
      });
    });
  }

4、模板渲染

静态渲染：


{{$t("lang .homeOverview")}}

如果是element-ui 的，在要翻译的前面加上冒号
比如：label="用户姓名" 就改成 :label="$t("order.userName")"

动态渲染：

{{navCompany}}
 computed:{
      navCompany:function(){
        if(this.nav_company){
          let str = "lang"+this.nav_company;
          return this.$t(str);
        }
      }
},
    
 
    
 

      
              


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

GPU云服务器云服务器 vue-i18n VUE实现webrtc Vue实现分页 vue使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94035.html

vue-i18n和elementUI实现国际化

摘要：为了满足很多公司都已经向方向发展顾使用多语言的网站已经太普遍了所以是使用和实现国际化接下来我会尽量写的详细一点的内容个人觉得的应该写得清楚一些安装所需要用到的东西安装安装创建目录编写所需要用到的语言我只写了中文和英文欢迎来到我为了满足很多公司都已经向international方向发展,顾使用多语言的网站已经太普遍了, 所以是使用vue-i18n和elementUI实现国际化.接下来我...

_ang 2019-08-22 18:14 评论0 收藏0
基于Vue、vue-i18n实现国际化（多语言）

摘要：在中引入调用第三方插件新建一个对象默认语言配置语言选项是一个配置语言包文件和语言选项的文件，文件内容大致如下语言包列表合并语言包是一个函数，判断当前设置的语言类型，如果没有设置语言，则根据判断是中文还是非中文，非中文则显示英语。 vue-i18n官网 https://kazupon.github.io/vue... 项目用vue-cli构建，用到vue全家桶及webpack、iview...

smallStone 2019-08-23 14:30 评论0 收藏0
Vue国际化处理 vue-i18n 以及项目自动切换中英文

摘要：直接上预览链接国际化处理以及项目自动切换中英文环境搭建命令进入项目目录，执行以下命令安装国际化插件项目增加国际化翻译文件在项目的下添加文件夹增加中文翻译文件以及英文翻译文件，里面分别存储项目中需要翻译的信息。 0. 直接上预览链接 Vue国际化处理 vue-i18n 以及项目自动切换中英文 1. 环境搭建命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n...

wangtdgoodluck 2019-08-26 11:51 评论0 收藏0
vue-i18n结合Element-ui的配置

摘要：官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下为了实现插件的多语言切换按照如上把国际化文件都整合到一起，避免中大段引入相关代码。使用方法：在配合 Element-UI 一起使用时，会有2个问题： ####（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存 ####（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字关于第一个问题，可以在初始化...

孙淑建 2019-08-26 13:51 评论0 收藏0
前端国际化之Vue-i18n源码分析

摘要：最近的工作当中有个任务是做国际化。下文有对的源码进行分析。因为英文的阅读方向也是从左到右，因此语言展示的方向不予考虑。服务端数据翻译前端样式的调整中文转英文后部分文案过长图片第三方插件地图等中文转英文后肯定会遇到文案过长的情况。最近的工作当中有个任务是做国际化。这篇文章也是做个简单的总结。部分网站的当前解决的方案不同语言对应不同的页面。在本地开发的时候就分别打包输出了不同语言版...

不知名网友 2019-08-20 15:14 评论0 收藏0