序文
vue-i18nはじめに: この記事は、この国際化プラグインをインストールして、プロジェクトの国際化を完了し、中国語と英語の切り替え効果を達成するのに役立ちます。
1.vue-i18nをインストールする
pnpm install vue-i18n
2. 新しいファイルを作成します
2.1プロジェクトのルート ディレクトリに新しいlocalesフォルダーを作成し、 index.ts、en.ts、 の3 つのファイルを作成しますzh.ts(中国語と英語の切り替えのみ)
index.ts2.2 、en.ts、zh.tsファイルにコードを入力します
2.2.1 Index.ts ファイルに次のコードを入力します。
// index.ts
import {
createI18n } from 'vue-i18n';
import zh from './zh';
import en from './en';
const messages = {
en,
zh
};
const language = (navigator.language || 'en').toLocaleLowerCase(); // 这是获取浏览器的语言
const i18n = createI18n({
locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
fallbackLocale: 'en', // 设置备用语言
messages
});
export default i18n;
2.2.2 en.ts ファイルに次のコードを入力します。
// en.ts
export default {
login: {
username: 'Username',
password: 'Password',
}
};
2.2.3 zh.ts ファイルに次のコードを入力します。
// zh.ts
export default {
login: {
username: '账号',
password: '密码',
}
};
3. main.tsで導入
import {
createApp } from 'vue'
import i18n from './locales' // 关键代码
const app = createApp(App)
app.use(i18n) // 关键代码
app.mount('#app')
4. 使用する
4.1 テンプレートで使用する場合は、$t() メソッドを使用するか、vt を使用する必要があります。
<template>
<div>
// 使用方式一
<div> {
{
`$t('login.userName')`}} </div>
// 使用方式二
<div v-t="'login.password'"></div>
</div>
</template>
4.2 セットアップでの使用
<script setup lang="ts">
import {
useI18n } from 'vue-i18n'
const {
t } = useI18n()
console.log(t('login.useName'))
</script>
4.3 中国語と英語の切り替え
<template>
<div class="menu">
<div class="menu-item" @click="changeLang('zh')">中文</div>
<div class="menu-item" @click="changeLang('en')">English</div>
</div>
</template>
<script setup lang="ts">
import {
useI18n } from 'vue-i18n'
const {
locale } = useI18n()
// 切换中英文
const changeLang = (lang: string) => {
locale.value = lang
localStorage.setItem('lang', lang)// 持久化，避免刷新页面后重置中英文
}
</script>
5. 注意事項
で使用する場合、中国語と英語のルールel-formを切り替えたい場合は、それぞれに書き込む必要があります。rulesel-form-item:rules
<el-form-item
// 想实现 rules 规则的中英文切换，必须在每个 el-form-item上写 :rules
:rules="[
{
required: true,
message: t('login.usernameReg'),
trigger: 'blur'
}
]"
class="mt-22"
prop="username">
// placeholder处用法如下
<el-input v-model="loginForm.username" :placeholder="t('login.username')" clearable>
<template #prefix>
<svg-icon class="login-iconSize" icon-class="login-account" />
</template>
</el-input>
</el-form-item>