vue项目i18n国际化方案

思路：1、安装、引入i18n插件，创建i18n实例、挂载实例对象

2、定义语言包，每种语言创建一个.js语言包。把需要国际化的字段放在这些语言包里

3、组合语言包对象，在创建i18实例时设置默认语言

4、在组件中使用

实现：

1、安装i18n：vue2对应版本号8，vue3对应版本号9

例如：yarn add vue-i18n@9

2、定义语言包，比如定义中文和英文两种语言包如下，注意两个文件里面字段的键要保持一致。

例如：新建src/lang/zh.js

export default {

message: '请输入密码'

}

新建src/lang/en.js

export default {

message: 'Please input your password'

}

3、在main.js中引入、创建实例、挂载

// 英文语言包

import en from '@/lang/en.js'

// 中文语言包

import zh from '@/lang/zh.js'

// 引入vue-i18n插件

import { createI18n } from 'vue-i18n'

// 组合语言包对象

const messages = {

en,

zh

}

// 创建实例对象

const i18n = createI18n({

legacy: false,

messages,

locale: 'en' //设置默认语言为英语

})

app.use(i18n)

4、组件中使用

// 引入

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 使用，此处的message是两个语言包中定义的字段的键

<span>{{ t('message') }}</span>

5、切换语言

import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

locale.value = 'zh' // 原来是英语'en'，切换成中文'zh'