当前位置: 首页 > news >正文

一分钟上手Vue VueI18n Internationalization(i18n)多国语言系统开发、国际化、中英文语言切换!

这里以Vue2为例子

第一步:安装vue-i18n

npm install vue-i18n@8.26.5

第二步:在src下创建js文件夹,继续创建language文件夹

在language文件夹里面创建zh.js、en.js、index.js这仨文件

这仨文件代码分别如下:

zh.js

export default {word1: "中国必然崛起!",word2: "中文是伟大的语言",
}

小技巧Tip:还可以用对象的方式加入语言内容,譬如
word:{
    label1: "中国必然崛起!",
    label2: "中文是伟大的语言",
}

在调用的时候就用$t('word.label1')、$t('word.label1')就可以了,这样更加方便归类同一个栏目菜单下的词汇变量

en.js

export default {word1: "China is NB!",word2: "Chinese is great language",
}

 index.js

import Vue from 'vue'; import VueI18n from 'vue-i18n';//npm install vue-i18n@8.26.5
Vue.use(VueI18n);
//引入国际化变量文件
import zh from './zh';//中文
import en from './en';//英语
// ...可以按照上面的方式,继续添加其他语言
let messages = { zh, en, };
let defaultLang = 'zh';//默认是中文
Object.keys(messages).includes(localStorage.language) || (localStorage.language = defaultLang);
let locale = localStorage.language;
export default { locale, messages, defaultLang };

第三步:在main.js文件里面引入i18n

// 【多国语言】----------------------------------------------------------------
import i18n from './language';//引入多语言配置文件index.js//【初始化加载】----------------------------------------------------------------
import App from '../vue/App';
new Vue({el: '#app',render: h => h(App),router,store: vuex,i18n, //把i18n挂载在全局上
});

第四步:应用文件

<template><div><h1>{{ $t('word1') }}</h1><h2>{{ $t('word2') }}</h2><hr><el-button @click="changeLanguage('zh')" v-if="this.$i18n.locale !== 'zh'" type="success">中文</el-button><el-button @click="changeLanguage('en')" v-if="this.$i18n.locale !== 'en'" type="danger">英文</el-button></div>
</template>
<script>
import i18n from '@/js/language';//引入多语言配置文件index.js
export default {created() {this.addEvents();},methods: {changeLanguage(curLang) {Object.keys(i18n.messages).includes(curLang) || (curLang = i18n.defaultLang);this.$i18n.locale = curLang;localStorage.language = curLang;},addEvents(d) {this.removeEvents();addEventListener('storage', this.storage);},removeEvents(d) {removeEventListener('storage', this.storage);},storage(e) {e.key === 'language' && this.changeLanguage(e.newValue);// 监听手工修改localStorage.language;},}
};
</script> 
http://www.lryc.cn/news/122865.html

相关文章:

  • stm32 cubemx can通讯(1)回环模式
  • Python基础小项目
  • Python Opencv实践 - 在图像上绘制图形
  • 管理者应该编码,但不是在工作时
  • 深度学习常用的python库学习笔记
  • C语言属刷题训练【第八天】
  • 阿里云PolarDB数据库倚天ARM架构详细介绍
  • pytest 编写规范
  • Vue.use和vue.component的区别
  • 张驰咨询:提高企业竞争力,六西格玛设计公司(DFSS)在行动
  • 影响 40% 用户,Ubuntu 发行版被曝 2 个安全漏洞
  • SpringCache的介绍和入门案例
  • 闪马智能又上榜!
  • C++中的四种类型转换(Type Casting)方式
  • Linux系列:从0到1用Docker部署springboot项目
  • zabbix监控mysql数据库、nginx、Tomcat
  • 深入探索二叉树算法:理解、构建和应用C语言
  • (css)点击前隐藏icon图表 点击后显示
  • Tomcat的动静分离以及多实例部署
  • uniapp+vue3项目中使用vant-weapp
  • WordPress:实现发布文章自动添加TAG标签
  • ubuntu下FFmpeg安装和使用以及CMakeLists.txt模板
  • 数据结构顺序表和链表(超详细)
  • free 查看 buff/cache 很大,处理方法
  • 【Quarkus技术系列】「云原生架构体系」在云原生时代下的Java“拯救者”是Quarkus,那云原生是什么呢?
  • DHCP的工作原理
  • display:flex;兼容浏览器写法
  • 三、python Django ORM postgresql[数据定时备份、数据恢复]
  • c++字符串函数
  • 使用OkHttp发送POST请求的几种方式