前端国际化

1.下载依赖包

// package.json

"dependencies": {
    "vue-i18n": "^9.2.2",
},

        yarn 安装

2. 在src目录下新建目录结构

 3. locales/lang/*.js  

// zh.js

const zh = {
    messages: {
        welcome: '欢迎',
    }
}
export default zh


// en.js

const en = {
    messages: {
        welcome: 'Welcome'
    }
}
export default en

// ru.js

const ru = {
    messages: {
        welcome: 'Добро пожаловать'
    }
}
export default ru

3. locales/index.js 

import en from './lang/en'
import zh from './lang/zh'
import ru from './lang/ru'
export default {
    en, zh, ru
}

4. locales/i18n.js 

import { createApp } from 'vue'
import App from '../App.vue'

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

const app = createApp(App)

const i18n = createI18n({
    legacy: false,
    locale: localStorage.getItem('lang') || "zh", // 当前环境默认语言
    messages
})

export default function (app) {
    app.use(i18n)
}

5. main.js

// 国际化
...

import I18n from './locales/i18n'

....


app.use(I18n)

 基本配置已完成

6 .使用

··6.1 模板中使用

// 模板中使用不需要导入任何模块
<div>
    {{ $t('messages.welcome') }}
</div>

 6.2 script中使用

import { useI18n } from 'vue-i18n'
const { t } = useI18n();

console.log(t('messages.welcome'))

7 切换语言

import { useI18n } from 'vue-i18n'

export function handleSetLang(lang) {

	const { locale } = useI18n()
	locale.value = lang  //lang = 'zh|ru|en'
}