vue3项目中使用i18n实现国际化

一、安装i18n

npm install vue-i18n@next -S

二、在main.js中添加

import { i18n } from './i18n'

app.use(i18n)

三、创建i18n.js

import { createI18n } from 'vue-i18n'
//引入语言包
import en from '@/locale/en.js'
import zh from '@/lcoale/zh.js'

export const i18n = createI18n ({
	legact: false,
	locale: 'en',  //默认语言
	fallbackLocale: 'zh'
	messages:{
		en,
		zh
	}
});

四、模块化语言包

文件结构

|src
|----locales
|--------zh
|----------------index.js
|----------------imodel1.js
|----------------imodel2.js
|----------------……
|--------en
|----------------index.js
|----------------imodel1.js
|----------------imodel2.js
|----------------……
|i18n.js

语言包内容

zh、en文件夹中index.js

import model1.js from './model1.js'
import model2.js from './model2.js'
export default {
	...model1.js,
	...model2.js
};

zh文件夹中model1.js

export default {
    model1 = {
        home: '主页',
    }
}

en文件夹中model1.js

export default {
    model1 = {
        home: 'home',
    }
}

其他模块写法与model1相似，此处不再重复

五、组件中使用

<template>部分

插值语法

{{$t('model1.home')}}

标签中使用

<input :placeholder="$t('model1.home')" />

<script>部分

import { useI18n } from 'i18n';  //i18n.js的路径

export default {
	props: {
		title:{ type: String, default: function() { useI18n('model1.home); } }
	}
	setup(){
		const {t} = useI18n();
		let x = t('model1.home')
	}
}

六、组件之外的js文件中使用

import { i18n } from "./i18n" //i18n.js的路径
const { t } = i18n.global;

let text = t('model1.home');