vue项目国际化实践

• 最近在做名古屋线上马，属于国际化的赛事，所以就有了国际化的需求。因为使用vue作为技术栈，所以使用相应的vue-i18n实现。

首先，项目入口引用国际化vue-i18n插件

• index.js

import { createI18n } from 'vue-i18n'
import messages from 'utils/messages.js'

const i18n = createI18n({  
	locale: 'ja',  
	fallbackLocale: 'en',  
	messages,
})

const app = createApp(App) 
		 .use(i18n);

其次，配置项目相应的各种语言文案

• utils/messages.js

import enText from 'lang/en.js';
import jaText from 'ang/ja.js';
import cnText from 'lang/cn.js';
const messages = {  
	en: {    
		message: {      
			...enText    
		}  
	},  
	ja: {    
		message: {      
			...jaText    
		}  
	},  
	cn: {    
		message: {      
			...cnText    
		}  
	}
}

• lang/cn.js

export default {  hello: '你好，世界'}

• lang/en.js

export default {  hello: 'hello world',}

• lang/ja.js

export default {  hello: 'こんにちは、世界',}

最后，使用插件的api写国际格式化文案以及切换语言的方法。

• Index/index.vue

methods: {    
	i18nT(key) {      
		return this.$i18n.t(key);    
	},    
	i18nTChange (locale) {      
		this.$i18n.locale = locale;    
	},  
}

总之，国际化就是分成以上三个步骤走。