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
vue 项目的I18n国际化之路的更多相关文章
- webstorm如何调试vue项目的js
webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写 ...
- 在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 ...
- vue项目的mode:history模式
最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...
- 56.关于vue项目的seo问题
不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...
- Vue项目的npm环境搭建
Vue项目的环境搭建主要步骤如下: vue项目创建 安装NodeJS +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.ex ...
- vue项目的webpack设置请求模拟数据的接口方法
最近在跟着视频写饿了吗vue项目,其中模拟数据由于webpack版本变化,跟视频中不一致,下方博客有解决方案,其实视频里面的还能看懂,现在webpack的服务都在插件包里了,好难找. 请参考:http ...
- 基于vue项目的js工具方法汇总
以下是个人过去一年在vue项目的开发过程中经常会用到的一些公共方法,在此进行汇总,方便以后及有需要的朋友查看~ let util = {}; /** * @description 日期格式化 * @p ...
- vue项目的webpack4.X配置
这两天摆弄webpack,躺过很多坑,直到今天看了一位博主的文章才得以解决.他对配置中的各个部分做说明. 下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyif ...
- 访问阿里云 vue项目的 127.0.0.1:+ip
vue 127.0.0.1 将 localhost 改为 0.0.0.0 原理看下面链接 参考: https://www.cnblogs.com/sddai/p/9281189.html
随机推荐
- 3730 无线网络发射选址[NOIP 0214 day2 T1]
3730 无线网络发射选址 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题解 查看运行结果 题目描述 Description 随着智能手机的日 ...
- Linux音频驱动-ALSA概述
概述 ALSA(Advanced Linux Sound Architecture)是linux上主流的音频结构,在没有出现ALSA架构之前,一直使用的是OSS(Open Sound System)音 ...
- 水晶报表的宽度调整方法(设计器、代码调整、rpt文件属性)
水晶报表的宽度调整方法(设计器.代码调整.rpt文件属性) Posted on 2010-08-07 23:52 moss_tan_jun 阅读(1725) 评论(0) 编辑 收藏 经过个人反复研究后 ...
- 启动Tomcat任何程序都报错
启动Tomcat出现: Cannot publish to the server because it is missing its runtime environment. 可能是servers中不 ...
- Django-CKeditor使用笔记
1. 安装django-ckeditor $ pip install django-ckeditor 2. 在setting中,添加ckeditor , ckeditor_uploader 到INST ...
- bzoj1121[POI2008]激光发射器SZK(结论)
1121: [POI2008]激光发射器SZK Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 916 Solved: 759[Submit][Sta ...
- [Swift通天遁地]五、高级扩展-(6)对基本类型:Int、String、Array、Dictionary、Date的扩展
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- SpringBoot2.0整合SpringSecurity实现自定义表单登录
我们知道企业级权限框架一般有Shiro,Shiro虽然强大,但是却不属于Spring成员之一,接下来我们说说SpringSecurity这款强大的安全框架.费话不多说,直接上干货. pom文件引入以下 ...
- go语言Notepad++简易开发环境搭建(windows)
1.下载安装go语言:https://golang.org/dl/选择对应的平台,建议使用msi安装包,这个会帮你配置好环境变量(也许需要重启)对应的环境变量有: GOROOT - C:\Go\PAT ...
- Jquery EasyUI环境下设置下拉框选中指定选项
前提: 要求点击某个按钮就将所有的下拉框都设置为选中第一个选项,因此,指定索引是最好的做法 尝试过的做法: html代码如下(easyui 的写法) <select class="ea ...