在js中使用vue-i18n国际化获取相应语言对应字符

之前虽然一直在用Vue，但并没能理解Vue的本质是什么，今天也是正巧在苦思冥想怎么在外部的JS文件中，调用Vue的多语言插件，返回一个多语言的值时，看着js中如何使用vue-i18n国际化获取相应语言对应字符？这个问题下的回答，去进行了一些尝试后，才猛然意识到，Vue，本质上无论是main.js还是vue文件中的script模块，使用的也就是JS啊，那么逆推的话，在JS中调用vue的插件，和在vue文件中直接使用，差距绝对不应该有多大。

于是经过我的反复尝试后，下面就是我这次尝试的结果了。

vue中各个插件可以直接在js文件中引入并使用，axios、i18n，都是可以直接在js文件中import进来，然后进行使用。与在vue文件中的script中使用并没有太大区别，只是有些地方需要注意。

在js文件中使用this，并不能指定到该vue实例，在vue的js模块中使用this时，可以直接指定到当前使用的这个vue实例中，而在js环境下，这个上下文是不成立的。

因此如果想使用一些与vue实例相关的东西，则需要new出一个vue实例来后才能进行使用。

例如，在js文件中，返回多语言的一句话，就不能直接return this.$t('xxxxx')，而是要new出一个vue的实例后，把多语言json文件和该vue实例绑定起来，然后调用vue实例.$t('xxxxx')。

而在js文件中new出Vue实例的方法，和在main.js中new出Vue实例的方法相差无几。

下面给出一个在js文件中创建Vue实例，并绑定vue-i18n，返回相应语言对应字符字符串的例子：

//test.jsimport Vue from 'vue';
import VueI18n from 'vue-i18n';//使用Vue引入i18n，不然虽然能编译过，但所有页面都会变成空白，好像是webpack打包会失败，无法找到config
Vue.use(VueI18n);const messages = {en: {'WTMSB': 'While Tree Meet Some Board'},zh: {'WTMSB': '望天门山边'},
};
const i18n = new VueI18n({locale: 'zh',messages,
});//创建一个Vue实例，并传入i18n去绑定多语言
const vueInstance = new Vue({ i18n });export default {//测试方法，该方法就可以返回相应语言下的WTMSB的相应字符串了test() {return vueInstance.$t('WTMSB');}
}

上面这个例子，我测试了一下应该没什么问题。但值得注意的一点是，如果是这么定义的i18n：

const message = {en: {'WTMSB': 'While Tree Meet Some Board'},zh: {'WTMSB': '望天门山边'},
};
const i18n = new VueI18n({locale: 'zh',messages: message,
});

那么后续使用时就会无法找到关键字对应的文本，我在控制台对i18n.messages进行了打印之后，发现两者的层级是不一样的，因此就会出现压根找不到文本的情况了。

这个细节值得注意一下，因为在一直找不到文本时，我差点就怀疑到我之前的猜测是错误的，在JS文件中压根不能使用Vue的插件了……还好最后反复看了几遍vue-i18n的官方文档，发现了他那里面是上面那样定义的，尝试了一下才找到了问题的所在。

在js中使用vue-i18n国际化获取相应语言对应字符相关推荐

Vue由本地js中存放的url地址获取图片
Vue由本地js中存放的url地址获取图片对象必须放在js中(而不是json里面,json没有require).如果是在json中,需要采用其他方式去获取注意:url地址必须用这种形式,有requ ...
js中直接通过id名获取到这个元素
浏览器日常bug: 最近在复习javascript的时候发现了一个我还没有见过的一个有趣的东西,可能你也没有见过,所以就在这里记录一下:就是js中直接通过id名获取到这个元素,且不使用getEleme ...
vue i18n 国际化保姆级教程_看不懂自己找原因
1.国际化介绍对于一些跨国项目来说,国际化是尤为重要的,那么什么要国际化呢?国际化的意思就是将我们写的项目,能够根据不同国家的语言,进行翻译,进行切换,方便不同国家的客户使用基本思路如下 ① 定义 ...
vue i18n 国际化使用方法
1 先安装 npm install vue-i18n 2 新建文件assets/js/i18n.js 3 引入vue-i18n并注册到vue上 import VueI18n from 'vue-i ...
php获取网页js中的json,从php获取json数据使用js读取显示到网页笔记
//json与数组转换 $array = array("username" => "hellojson","age" => 23 ...
使用i18n，获取浏览器语言并自动切换
放置到main.js中配合i18n一起使用 const navLang = navigator.language || navigator.userLanguagelet localLang = na ...
js中调用vue中的方法
1.在vue的钩子函数中将需要调用的函数赋值给window. mounted() {//将Vue方法传到全局对象window中window.updateSocket = this.onSubmit; ...
高德h5地图api接口_H5，JS中使用微信、高德获取定位
目的: --:展示游戏玩家彼此之间的距离,防止棋牌游戏中用户作弊经过: 1:在微信公众号,配置对应的JS域名,IP地址白名单 2:在JS页面中,调用微信的JS-SDK,来使用微信的getLocati ...
js 中使用idx模块方便获取链条式的对象属性值
1. 背景从一个js对象的属性值中的属性再次获得值,或者从集合中获得元素再获得属性值要写很多判断是否空的表达式,才能继续读取,否则就出现异常.这在开发过程很繁琐的事情,idx 模块就是来解决这个问题 ...

在js中使用vue-i18n国际化获取相应语言对应字符

在js中使用vue-i18n国际化获取相应语言对应字符相关推荐

最新文章

热门文章