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

效果图:
中文

![](https://img2018.cnblogs.com/blog/1504257/201811/1504257-20181106224306581-820518631.png)

英文

![](https://img2018.cnblogs.com/blog/1504257/201811/1504257-20181106224330516-2063806660.png)

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

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

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

  1. webstorm如何调试vue项目的js

    webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写 ...

  2. 在Vue中使用i18n 国际化遇到 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    最近用Vue在搭建前端框架,在引用i18n时,运行的时候报错:Uncaught TypeError: Cannot assign to read only property 'exports' of ...

  3. vue项目的mode:history模式

    最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...

  4. 56.关于vue项目的seo问题

    不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...

  5. Vue项目的npm环境搭建

    Vue项目的环境搭建主要步骤如下: vue项目创建 安装NodeJS +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.ex ...

  6. vue项目的webpack设置请求模拟数据的接口方法

    最近在跟着视频写饿了吗vue项目,其中模拟数据由于webpack版本变化,跟视频中不一致,下方博客有解决方案,其实视频里面的还能看懂,现在webpack的服务都在插件包里了,好难找. 请参考:http ...

  7. 基于vue项目的js工具方法汇总

    以下是个人过去一年在vue项目的开发过程中经常会用到的一些公共方法,在此进行汇总,方便以后及有需要的朋友查看~ let util = {}; /** * @description 日期格式化 * @p ...

  8. vue项目的webpack4.X配置

    这两天摆弄webpack,躺过很多坑,直到今天看了一位博主的文章才得以解决.他对配置中的各个部分做说明. 下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyif ...

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

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

随机推荐

  1. 3730 无线网络发射选址[NOIP 0214 day2 T1]

    3730 无线网络发射选址  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题解  查看运行结果     题目描述 Description 随着智能手机的日 ...

  2. Linux音频驱动-ALSA概述

    概述 ALSA(Advanced Linux Sound Architecture)是linux上主流的音频结构,在没有出现ALSA架构之前,一直使用的是OSS(Open Sound System)音 ...

  3. 水晶报表的宽度调整方法(设计器、代码调整、rpt文件属性)

    水晶报表的宽度调整方法(设计器.代码调整.rpt文件属性) Posted on 2010-08-07 23:52 moss_tan_jun 阅读(1725) 评论(0) 编辑 收藏 经过个人反复研究后 ...

  4. 启动Tomcat任何程序都报错

    启动Tomcat出现: Cannot publish to the server because it is missing its runtime environment. 可能是servers中不 ...

  5. Django-CKeditor使用笔记

    1. 安装django-ckeditor $ pip install django-ckeditor 2. 在setting中,添加ckeditor , ckeditor_uploader 到INST ...

  6. bzoj1121[POI2008]激光发射器SZK(结论)

    1121: [POI2008]激光发射器SZK Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 916  Solved: 759[Submit][Sta ...

  7. [Swift通天遁地]五、高级扩展-(6)对基本类型:Int、String、Array、Dictionary、Date的扩展

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. SpringBoot2.0整合SpringSecurity实现自定义表单登录

    我们知道企业级权限框架一般有Shiro,Shiro虽然强大,但是却不属于Spring成员之一,接下来我们说说SpringSecurity这款强大的安全框架.费话不多说,直接上干货. pom文件引入以下 ...

  9. go语言Notepad++简易开发环境搭建(windows)

    1.下载安装go语言:https://golang.org/dl/选择对应的平台,建议使用msi安装包,这个会帮你配置好环境变量(也许需要重启)对应的环境变量有: GOROOT - C:\Go\PAT ...

  10. Jquery EasyUI环境下设置下拉框选中指定选项

    前提: 要求点击某个按钮就将所有的下拉框都设置为选中第一个选项,因此,指定索引是最好的做法 尝试过的做法: html代码如下(easyui 的写法) <select class="ea ...