如何在JS文件中使用Vue-i18n

问题来了，如果不在组件模板中怎么办？比如在JS代码中如何使用一些与视图无关的工具函数、请求拦截器等？插件的使用场景是在组件内部，即可以从哪里访问到组件实例。对于其他地方的使用，官方文档好像没有提供直接的API。摸索了一会儿，终于解决了，记录在这里。importVueI18nfrom'vue-i18n';constmessages={en:{message:{hello:'helloworld'}},cn:{message:{hello:'Helloworld'}}}consti18n=newVueI18n({locale:'cn',//setlocalemessages:消息,//setlocalemessages});console.log(i18n.tc('message.hello'))//HelloworldwithVSCode插件随着项目规模的扩大，文字标签会越来越多，手动维护很麻烦。同时，使用像“a.b.c”这样的属性字符串来引用模板中的文本在源代码级别非常难以阅读。这些问题应该通过工具来解决。之前想过开发一个VSCode的插件来解决这些问题，没想到已经有人做了。开源社区是如此强大。你能想到的都已经做了。这个插件叫做Vuei18n。Vuei18n早期版本不是很好用，我也提到了PR来修复这个缺陷。现在比较齐全，功能齐全，操作方便。可选择文本一键生成中英文。默认键名是组件路径加上随机字符串，省去命名的麻烦。也可以在编辑器中直接看到对应的中文，鼠标悬停显示英文。总之比较方便，值得推荐。前面介绍了在Vue组件外使用vue-i18n的方法，但是这个VSCode插件还有一个小问题需要解决。插件根据源码的字符串进行匹配，然后在编辑器中显示对应的文字。因此，$t('xxx')字样必须包含在源代码中。改成这样，可以显示：貌似没问题，实际上运行会报错：runtimeexception。为什么？点击报错信息的调用栈查看源码，发现原来i18n.tc的方法是绑定到This（运行时指向VueI18n对象）执行的，而这里的代码是没有this的时候已执行，所以它是未定义的。VueI18n.prototype.tc=functiontc(key,choice){varref;varvalues=[],len=arguments.length-2;while(len-->0)values[len]=arguments[len+2];return(ref=this)._tc.apply(ref,[key,this.locale,this._getMessages(),null,choice].concat(values))};所以这里不能直接调用，需要改变执行上下文。重新打包这个方法：importVuefrom'vue';importVueI18nfrom'vue-i18n';importi18nLabelsfrom'@/i18n';Vue.use(VueI18n);exportconsti18n=newVueI18n({locale:'zh',//setlocalemessages:i18nLabels,//setlocalemessages});//重新封装方法exportfunction$t(args){returni18n.tc.call(i18n,args);}使用的时候导入这个方法即可。本文转载自微信公众号“1024翻译站”，可通过以下二维码关注。转载请联系1024翻译站公众号。