Vue-i18n在js文件中使用

前言

在Vue.js项目中,vue-i18n是一个比较流行的多语言方案。常规用法是在项目入口文件里,将它作为插件引入,然后在 .vue文件或者组件模板里按照 API 来调用就行。插件会自动往组件实例中注入$t方法。

Vue-i18n实现多语言功能我已经做完了,具体可以看上一篇文章:uniapp通过i18n实现多语言功能,但是我这边遇到的一个问题是我的菜单栏是写在一个js文件中的,我在vue页面中通过v-for来遍历展示出来,所以这里就遇到一个问题是我需要把菜单栏也做成多语言切换的形式,其中遇到的困难比较多,通过查找了一天资料,尝试了比较多的写法还是没实现效果,直至晚上加班时,在公司里的一位超级大牛的指导下才完成这块功能,在此记录下。

实现

注释和打印比较多,主要是大牛在调试下实现的该功能,属实是很强。

言归正传,这里上面我们把原来写在main.js文件的代码再写一遍

csharp 复制代码
import Vue from 'vue'
// import  i18n from "@/main.js"
import VueI18n from 'vue-i18n'
import Chinese from '@/common/lang/cn.js'; //简体中文
import English from '@/common/lang/en.js'; //英文
import Deutsch from '@/common/lang/gd.js'; //德文
// const locale= uni.getStorageSync('locale') || 'zh_CN';
// const	messages= {
// 		// 这里的属性名是任意的,您也可以把zh设置为cn等,只是后续切换语言时
// 		// 要标识这里的语言属性,如:this.$i18n.locale = zh|en|cn|xxx
// 		'zh_CN': Chinese,
// 		'en_US': English,
// 		'de-DE':Deutsch
// 	};
// const localeLG=messages[locale];
Vue.use(VueI18n) 
console.log('打印引用的i18n')
// 构造i18n对象
const i18n = new VueI18n({
	// 默认语言,这里的local属性,对应message中的cn、en属性
	locale: uni.getStorageSync('locale') || 'zh_CN',
	// 引入语言文件
	messages: {
		// 这里的属性名是任意的,您也可以把zh设置为cn等,只是后续切换语言时
		// 要标识这里的语言属性,如:this.$i18n.locale = zh|en|cn|xxx
		'zh_CN': Chinese,
		'en_US': English,
		'de-DE':Deutsch
	}
});

这里的话我们是能打印出来i18n的,在vue界面我们通过使用 t ( ′ ′ ) 的形式来写,但是这里的话我们采用这个写法的话实现不了,我们点进去看源码,发现这个 t('')的形式来写,但是这里的话我们采用这个写法的话实现不了,我们点进去看源码,发现这个 t(′′)的形式来写,但是这里的话我们采用这个写法的话实现不了,我们点进去看源码,发现这个t是绑定了vue的实例。
t : t y p e o f V u e I 18 n . p r o t o t y p e . t ; 我们在 j s 中打印 V u e I 18 n 的话是能打印出来值的,但是 . 出来的值我们就拿不到了,包括查询出来的 i 18 n . v m 也是可以打印出来的,但是我们这里娶不到 i 18 n . v m . t: typeof VueI18n.prototype.t; 我们在js中打印 VueI18n 的话是能打印出来值的,但是.出来的值我们就拿不到了,包括查询出来的i18n._vm也是可以打印出来的,但是我们这里娶不到i18n._vm. t:typeofVueI18n.prototype.t;我们在js中打印VueI18n的话是能打印出来值的,但是.出来的值我们就拿不到了,包括查询出来的i18n.vm也是可以打印出来的,但是我们这里娶不到i18n.vm.t的值,这一块只能说可能语法不支持,但是好在可以通过i18n.tc来进行取值。

csharp 复制代码
declare module 'vue/types/vue' {
  interface Vue {
    readonly $i18n: VueI18n & IVueI18n;
    $t: typeof VueI18n.prototype.t;
    $tc: typeof VueI18n.prototype.tc;
    $te: typeof VueI18n.prototype.te;
    $d: typeof VueI18n.prototype.d;
    $n: typeof VueI18n.prototype.n;
  }
}

详细代码

csharp 复制代码
import Vue from 'vue'
// import  i18n from "@/main.js"
import VueI18n from 'vue-i18n'
import Chinese from '@/common/lang/cn.js'; //简体中文
import English from '@/common/lang/en.js'; //英文
import Deutsch from '@/common/lang/gd.js'; //德文
// const locale= uni.getStorageSync('locale') || 'zh_CN';
// const	messages= {
// 		// 这里的属性名是任意的,您也可以把zh设置为cn等,只是后续切换语言时
// 		// 要标识这里的语言属性,如:this.$i18n.locale = zh|en|cn|xxx
// 		'zh_CN': Chinese,
// 		'en_US': English,
// 		'de-DE':Deutsch
// 	};
// const localeLG=messages[locale];
Vue.use(VueI18n) 
console.log('打印引用的i18n')
// 构造i18n对象
const i18n = new VueI18n({
	// 默认语言,这里的local属性,对应message中的cn、en属性
	locale: uni.getStorageSync('locale') || 'zh_CN',
	// 引入语言文件
	messages: {
		// 这里的属性名是任意的,您也可以把zh设置为cn等,只是后续切换语言时
		// 要标识这里的语言属性,如:this.$i18n.locale = zh|en|cn|xxx
		'zh_CN': Chinese,
		'en_US': English,
		'de-DE':Deutsch
	}
});
console.log('打印引用的i18n')
const  icon_prefix="/static/home/128/"
console.log('打印引用的i18n2222',i18n)
console.log('打印引用的i15555555522',i18n.tc('login.title'))
// console.log('打印引用的i18n',VueI18n)
// // console.log('打印引用的i18n',this)
// // /pages/product/uncoiling
// console.log('打印引用的i18n',VueI18n.prototype.t)vm
// const $t= i18n.prototype.t
console.log('打印引用的i18n33444455',i18n)
const $t=i18n.tc
console.log('打印引用的i18n3333333',i18n._vm.$t)
console.log('打印引用的i18n3333366',$t)
console.log('打印引用的i18n3346',i18n.tc('login.title'))
console.log('打印引用的i18n44444',i18n.tc('login.title'))
相关推荐
Yaml47 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
DK七七1 天前
当今陪玩系统小程序趋势,陪玩系统源码搭建后的适用于哪些平台
小程序·php·uniapp
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
漫天转悠2 天前
Uniapp在Vue环境中引入iconfont图标库(详细教程)
前端·vue.js·uniapp
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计