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

本文介绍了如何在独立的JavaScript文件中使用vue-i18n实现国际化。通过新建Vue实例并绑定i18n对象,可以成功获取不同语言的对应字符。关键在于正确配置i18n并理解在JS环境中Vue实例的使用差异。
摘要由CSDN通过智能技术生成

之前虽然一直在用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.js

import Vue from 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值