vue 项目的I18n国际化之路

2i18ns 发布于2019-08-22 16:06 / 1537人阅读

摘要：国内主要主要三点，一个是港澳台采用中文繁体英文，内陆通俗中文简体，新疆等地区采用文化标准。

I18n (internationalization ) ---未完善

产品国际化是产品后期维护及推广中重要的一环，通过国际化操作使得产品能更好适应不同语言和地区的需求

国际化重点：
1、语言
语言本地化
2、文化
颜色、习俗等
3、书写习惯
日期格式、时区、数字格式、书写方向
备注：项目中会兵分两路，一路是语言的国际化，另一路主要为文化国际化

产品设计之初引入国际化标准，符合项目的开发流程。
国内主要主要三点，一个是港澳台采用中文繁体+英文，内陆通俗中文简体，新疆等地区采用文化标准。

Vue-I18n
Vue-I18n安装
CDN:

NPM:

npm install vue-i18n --save-dev

vue-I18n暴露$t对象进行应用
项目例子（面向中国内陆及港澳台）

Main.js

import VueI18n from "vue-i18n"
/* 平台国际语言静态字典 */
import LangEn from "./lang/en"
import LangZhCHS from "./lang/zhCHS"
import LangZhCHT from "./lang/zhCHT"
/* vue-i18n注册 */
Vue.use(VueI18n)
// 设置语言项
const i18n = new VueI18n({
  locale: "zhCHS",
  messages: {
    "en": LangEn,
    "zhCHS": LangZhCHS,
    "zhCHT": LangZhCHT
  }
})
/* eslint-disable no-new */
new Vue({
  el: "#app",
  i18n,
  components: { App },
  template: ""
})

zhCHS.js
通过exports

module.exports = {
  buttom: {
    cancel: "取消",
    determine: "确定",
    login: "登陆",
    signOut: "退出登陆",
    registered: "注册",
    search: "查询",
    submit: "提交",
    save: "保存"
  }
}

Example.vue
通过$t进行数据绑定
例子中初始化先检查浏览器默认语言，并保存到localstorage中
通过this.$i18n.locale可以随意切换版本

{{$t("buttom.cancel")}}

  
    中文
    format_align_left
  
  
    English
    format_color_text
  



  watch: {
    icon (val) {
      this.$i18n.locale = val
      this.setLocalStorage("PLAY_LANG", val)
    }
  },
  created () {
    let lang = this.getLocalStorage("PLAY_LANG")
    if (lang) {
      this.icon = lang
    } else {
      let defaultLang = this.getNavigatorLang()  // 获取浏览器设置语言
      this.setLocalStorage("PLAY_LANG", defaultLang)
      this.icon = defaultLang
    }
  }

效果图：
中文

英文

完整项目github地址：https://github.com/hty7/vue-d...

GPU云服务器云服务器云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上阿里云服务器搭建vue项目

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

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

如何让一个vue项目支持多语言（vue-i18n）

摘要：引入是一个插件，主要作用就是让项目支持国际化多语言。所以新建一个文件夹，存放所有跟多语言相关的代码。目前包含三个文件。全局搜索发现一共有多个。这两天手头的一个任务是给一个五六年的老项目添加多语言。这个项目庞大且复杂，早期是用jQuery实现的，两年前引入Vue并逐渐用组件替换了之前的Mustache风格模板。要添加多语言，不可避免存在很多文本替换的工作，这么庞杂的一个项目，怎么才能使...

wuyumin 2019-08-22 17:31 评论0 收藏0
vue-i18n和elementUI实现国际化

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

_ang 2019-08-22 18:14 评论0 收藏0
vue中使用国际化基础使用

摘要：方式使用引入要在之后引入使用你好当前语言重新设置中文英文其他当前语言切换语言效果项目中使用安装使用入口文件增加以下代码可以创建文件夹，拆分国际化文件最后引入国际化保存对象你好引用模板当前语言切换语言当前语言重新设置中文英文其他效 cdn方式使用 1.引入 vue-i18n要在vue之后引入 2.使用 js const messages = { zh_CN: { ...

Kosmos 2019-08-26 10:37 评论0 收藏0
vue 国际化i18n 多语言切换

摘要：如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。安装 npm install vue-i18n 新建一个文件夹 i18n ，内新建 en.js zh.js index.js 三个文件准备翻译信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

tuomao 2019-04-23 13:19 评论0 收藏0
vue-i18n结合Element-ui的配置

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

孙淑建 2019-08-26 13:51 评论0 收藏0