使用vue 国际化i18n 实现多实现语言切换功能


Posted in Javascript onOctober 11, 2018

安装

npm install vue-i18n

新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件

准备翻译信息

en.js

export default {
 home: {
 helloworld: "hello workd !"
 }
};

zh.js

export default {
 home: {
 helloworld: "你好世界"
 }
};

index.js

创建Vue-i18n实例

import Vue from "vue";
import VueI18n from "vue-i18n";
import enLocale from "./en";
import zhLocale from "./zh";
Vue.use(VueI18n);
const i18n = new VueI18n({
 locale: localStorage.lang || "zh",
 messages: {
 en: {
  ...enLocale
 },
 zh: {
  ...zhLocale
 }
 }
});
export default i18n;

i18n 挂载到 vue 根实例

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./assets/i18n/index";
Vue.config.productionTip = false;
Vue.prototype.$i18n = i18n;
new Vue({
 router,
 store,
 i18n,
 render: h => h(App)
}).$mount("#app");

简单的使用

about.vue

<template>
 <div class="about">
 <h1>{{ $t("home.helloworld") }}</h1>
 <button @click="changeLang()">切换英文</button>
 <p>{{hi}}</p>
 </div>
</template>
<script>
export default {
 data: function() {
 return {};
 },
 computed: {
 hi() {
  return this.$t("home.helloworld");
 }
 },
 methods: {
 changeLang() {
  this.$i18n.locale = "en";
 }
 }
};
</script>

注意:

比如说上面的hi 你要通过这种形式来写的时候,不能放在data 里面,因为当语言切换的时候 他是不会变的 ,要写在computed内

总结

以上所述是小编给大家介绍的使用vue 国际化i18n 多实现语言切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS+CSS实现一个气泡提示框
Aug 18 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
vue设置默认首页的操作
Aug 12 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 #Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 #Javascript
vue环形进度条组件实例应用
Oct 10 #Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 #Javascript
详解Node.js读写中文内容文件操作
Oct 10 #Javascript
angular6的响应式表单的实现
Oct 10 #Javascript
JS原生带缩略图的图片切换效果
Oct 10 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
调整PHP的性能
2013/10/30 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python实现名片管理系统
2018/11/29 Python
python 检测图片是否有马赛克
2020/12/01 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
如何强制垃圾回收
2015/10/06 面试题
一套C++笔试题面试题
2012/06/06 面试题
品恩科技软件测试面试题
2014/10/26 面试题
教室布置标语
2014/06/26 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android