使用VueI18n.js实现国际化
1、介绍
本文使用Vue.js、VueI18n.js和代码块封装了web国际化。
注意:type="module"是ES6新特性,因此有部分浏览还不支持,例如IE、360浏览器,支持的浏览器有Safari 10.1、Chrome 61、Firefox 60、Edge 16;代码块的使用(import、export);VueI18n的参数使用。
本文工程在github下载地址:https://github.com/MasonYyp/vueI18n-globalization
参考VueI18n.js官网API:http://kazupon.github.io/vue-i18n/started.html#html
此项目,可以将相关的方法和变量全部修改为function对象,不使用module,即可使用所有浏览器。
2、工程截图
3、源代码
3.1 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="./js/libs/vue-2.6.10.min.js" ></script>
<script type="text/javascript" src="./js/libs/vue-i18n-8.14.0.min.js" ></script>
</head>
<body>
<div id="nav">
<button id="change_language" v-on:click="change_language">{{ $t("nav.change_language") }}</button>
<ol>
<li>{{ $t("nav.department_software") }}</li>
<li>{{ $t("nav.department_computer_technology") }}</li>
</ol>
</div>
<footer id="foot">{{ $t("foot.copyright") }}</footer>
</body>
<!-- 导入js 注意tpye -->
<script type="module" src="./js/globalization.js" ></script>
</html>
3.2 globalization.js
// 导入配置文件
import configure from "../js/language/language_configure.js";
// 执行主函数
main()
function main(){
globalization();
}
// 国际化
function globalization(){
var i18n = configure.i18n;
new Vue({
el:"#nav",
i18n: i18n,
data(){
return{
count_local_code:configure.locale_code
}
},
methods:{
change_language(){
if(this.count_local_code == configure.language_number){
this.count_local_code = 1;
}else{
this.count_local_code = this.count_local_code + 1;
}
configure.change_language(this.count_local_code);
// 可以使用 $t调用语言中的参数,但是必须在Vue实例中调用
// alert(this.$t("nav.department_software"));
}
}
});
new Vue({ i18n }).$mount("#foot");
}
3.3 配置文件language_configure.js
import zh from "../language/messages_zh.js";
import en from "../language/messages_en.js";
/**
* 设置语言
* @param {Object} language 语言
*/
function set_language(language){
// 保存语言设置
sessionStorage.setItem("language", language);
// 切换语言
i18n.locale = language;
}
/**
* 获得语言
* Return 返回语言
*/
function get_language(){
return sessionStorage.getItem("language");
}
/**
* 获得VueI18n实例
* Return 返回i18n实例和语言编码
*/
function get_i18n(){
var messages_zh = zh.messages;
var messages_en = en.messages;
// 添加所有的语言
var i18n_messages = {
zh:messages_zh,
en:messages_en
}
// 设置语言
var temp_locale = get_language();
if(temp_locale == null){
// 默认中文
temp_locale = 'zh';
}
var temp_locale_code = get_language_code(temp_locale);
// 实例化i18n
var temp_i18n = new VueI18n({
locale: temp_locale, // 设置语言
messages: i18n_messages // 设置数据
});
return {"i18n":temp_i18n, "i18n_locale_code":temp_locale_code};
}
/**
* 获得语言编码
* @param {Object} temp_locale 表示自定义的语言符号
* Return 返回语言编码
*/
function get_language_code(temp_locale){
var temp_locale_code = 1;
switch(temp_locale){
case "zh":{
temp_locale_code = 1;
break;
}
case "en":{
temp_locale_code = 2;
break;
}
}
return temp_locale_code;
}
/**
* 修改语言
* @param {Object} temp_local_code 表示语言的编码
*/
function change_language(temp_local_code){
var temp_local = "zh";
switch(temp_local_code){
case 1:{
temp_local = "zh";
break;
}
case 2:{
temp_local = "en";
break;
}
}
// 设置语言
set_language(temp_local);
}
// 获得i18n实例和语言编码
var global_temp_i18n = get_i18n();
var i18n = global_temp_i18n.i18n;
var locale_code = global_temp_i18n.i18n_locale_code;
// 设置语言种类的个数
var language_number = 2;
export default {i18n, locale_code, change_language, language_number}
3.4 英文数据文件messages_en.js
const messages = {
nav:{
change_language:"change language",
department_software:" software ",
department_computer_technology:" computer technology "
},
foot:{
copyright:"Henan university 1912 "
}
}
export default{ messages }
3.5 中文数据文件messages_zh.js
const messages = {
nav:{
change_language:"更改语言",
department_software:" 软件学院 ",
department_computer_technology:" 计算机学院 "
},
foot:{
copyright:"河南大学 1912 "
}
}
export default{ messages }
使用VueI18n.js实现国际化相关推荐
- Vue.JS项目同时使用Element-UI与vue-i18n时实现国际化的方案
之前我们谈到过使用vue-i18n实现国际化的方案,但是这个方案的缺点是没有结合Element-UI的国际化,也就是使用了Element-UI的话,Element-UI自带的组件里的文字无法实现国际化 ...
- html引vue怎么实现国际化,Vue项目中Vue-i18n和element-ui国际化开发实现过程_唇印_前端开发者...
在开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如 ...
- vue-i18n及ElementUI国际化配置步骤
1.vue-I18n使用 1.1.下载依赖 注意:vue2.0要用8版本的,使用9版本的会报错 npm install vue-i18n // 默认安装最新版本npm i vue-i18n@8.27. ...
- 使用 vue-i18n 进行Vue国际化处理,使项目切换中英文
1.下载安装插件 命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 2. 项目增加国际化翻译文件 在项目的src下添加lan ...
- 国际化(1)---JS文件国际化
一.首先可以通过一个java.util.Locale测试类获取不同国家的语言形式,代码如下: import java.util.Locale; /** * 获取各国语言方式 * @author zhe ...
- vue-i18n和ElementUI国际化使用
在main.js同级建i18n文件夹,并里面建i18n.js.langs文件夹,langs文件夹下建en.js.cn.js 目录如下: 展示效果地址: http://www.cenweixin.cn/ ...
- vue-i18n国际化实例
demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化 1.我们得先有开发环境,先有项 ...
- vue项目国际化 vue-i18n以及踩坑解决 小姐姐手把手教你VUE国际化~
1.安装配置 - 安装 $ npm install vue-i18n 或者: <script src="https://unpkg.com/vue/dist/vue.js"& ...
- vue2使用国际化vue-i18n详解+ES6的import和export区别
1.安装vue-i18n: npm install vue-i18n@6 -s 坑大了,我用vue2写一开始没考虑到兼容性,直接npm i vue-i18n装了最新的9.2.2版本的,装完控制台有 兼 ...
最新文章
- SQL Server自定义字符串分割函数——Split
- thinkphp5调用shell脚本_thinkphp5.x全版本任意代码执行getshell
- leetcode算法题--爬楼梯
- 《3D Math Primer for Graphics and Game Development》读书笔记1
- C# WebApi 返回JSON类型
- 属于db模式缺点的是什么_详解 Seata Golang 客户端 AT 模式及其使用
- webkitlineclamp css3,-webkit-line-clamp
- python json文件操作_python对json的操作总结
- 电脑可以开机但是黑屏_铅锤哥:十五种电脑开机黑屏的原因与解决思路
- [转载]jQuery1.6.1源码分析系列
- 配置mac百度云同步盘
- EMERSON模块A6500-UM、SLS1508、MVME7100-0171、MVME61006E-0163、A6370D、SE3008、CE3008、MVME6100、VE3006,CE3008
- 一步步教你如何实现小程序倒计时三二一后跳转页面功能,附加倒计时过渡动画
- 结对编程四则运算第三周-挑战出题(20172301、20172304、20172328)
- windows server 2008共享文件夹
- matlab绘制三维图形,Matlab 应用之绘制三维图形(基础篇)(组图)
- wxPython下载安装教程
- 刘华:上云还是不上云,这是一个问题
- 从两年一次到一年三次,百度频繁调整架构为哪般?
- 怎么做革命性创新产品