使用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 相关文章推荐
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
js单词形式的运算符
May 06 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
详解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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php 特殊字符处理函数
2008/09/05 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
商务日语毕业生自荐信范文
2013/11/14 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
大学生在校表现评语
2014/12/31 职场文书
施工安全保证书
2015/05/09 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
教师外出学习心得体会
2016/01/18 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL