vue 项目的I18n国际化之路

I18n (internationalization ) ---未完善

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

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

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

Vue-I18n
Vue-I18n安装
CDN:


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

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: '<App/>'
})

zhCHS.js
通过exports


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

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


<v-btn flat>{{$t('buttom.cancel')}}</v-btn>
<v-btn-toggle v-model="icon">
  <v-btn flat value="zhCHS">
    <span>中文</span>
    <v-icon>format_align_left</v-icon>
  </v-btn>
  <v-btn flat value="en">
    <span>English</span>
    <v-icon>format_color_text</v-icon>
  </v-btn>
</v-btn-toggle>

  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...

原文地址:https://segmentfault.com/a/1190000014241037

原文地址:https://www.cnblogs.com/lalalagq/p/9919414.html

时间: 2024-10-08 20:10:16

vue 项目的I18n国际化之路的相关文章

webstorm如何调试vue项目的js

webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写示例: http://localhost:8080 保存好调试配置 2.先用dev正常启动项目,然后切换到刚才设置的js调试名称,点击debug按钮,这时候会打开chrome,如下图所示 : 4.当我们在chrome中运行页面,WebStorm就会响应断点状态,如下图所示: 原文地址:https:/

关于webpack 打包vue项目的2中路由配置方式

首先,2种都是引入配置好的router里面的index.js import Vue from 'vue'import Router from 'vue-router'import login from '@/components/login' Vue.use(Router) 1.第一种写法export default new Router({  routes: [    {      path: '/login',      component: login    }   ]}) 2.第二种写法

56.关于vue项目的seo问题

不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前后端分离开发么? 首先,可以肯定的是前后端分离不利于SEO,为什么呢? 1.搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析. 而你的页面通常用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面,所以说用js来渲染数据对

vue项目的webpack4.X配置

这两天摆弄webpack,躺过很多坑,直到今天看了一位博主的文章才得以解决.他对配置中的各个部分做说明. 下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyifenzhizuo/p/10271001.html 安装package.json中的node-sass可能因为网络原因不能成功安装 报错信息有一大串,其中提及python和gyp,其实不用去安装他们.只要执行下面的命令: npm set sass_binary_site=https://npm.tao

访问阿里云 vue项目的 127.0.0.1:+ip

vue 127.0.0.1 将  localhost 改为 0.0.0.0 原理看下面链接 参考: https://www.cnblogs.com/sddai/p/9281189.html 原文地址:https://www.cnblogs.com/Jomini/p/10816598.html

codova 打包vue项目的坑

打包过程参考 https://segmentfault.com/a/1190000019491068 坑一: vue router路由不能再使用history模式,因为现在使用的是file协议,不是http(s)协议了,使用history模式会跳转从而找不到文件,修改成hash模式.坑二:路径问题,因为打包成app时会有平台路径添加到前面,所以不能像web一个使用绝对路径,而要使用相对路径,分别打包ios和android就不需要考虑平台路径问题了.但是新的问题出来了,但是如果要剥离css出来,那

vue i18n 国际化 使用方法

1 先安装 npm install vue-i18n 2  新建文件assets/js/i18n.js 3  引入vue-i18n并注册到vue上 import VueI18n from 'vue-i18n' import Vue from 'vue' Vue.use(VueI18n) let locale = 'zh-CN' // 我这里进行了sessionStoraage配置 // sessionStorage.getItem('vuex') ? sessionStorage.getItem

跨过Nginx上基于uWSGI部署Django项目的坑

先说说他们的关系,Nginx和uWSGI都是Web服务器,Nginx负责静态内容,uWSGI负责Python这样的动态内容,二者配合共同提供Web服务以实现提高效率和负载均衡等目的.uWSGI实现了多个协议,如WSGI,HTTP协议,还有它自己的uwsgi协议,想了解更多关于uWSGI和uwsgi协议内容可以查阅这里.这样和fastcgi类似,请求和响应的流程如下: Request > Nginx > uWSGI > Django > uWSGI > Nginx > R

Django1.9开发博客(12)- i18n国际化

国际化与本地化的目的为了能为各个不同的用户以他们最熟悉的语言和格式来显示网页. Django能完美支持文本翻译.日期时间和数字的格式化.时区. 另外,Django还有两点优势: 允许开发者和模板作者指定他们哪些app应该被翻译或被格式化为本地形式. 允许用户根据自己的偏好来实现本地化显示.翻译依据语言,格式化依据国家, 这些信息由浏览器中的Accept-Language头来决定.不过目前为止时区还未能实现. 参考官方文档:https://docs.djangoproject.com/en/1.9