第二部:配置全局导入 i18n
在 main.ts 中配置全局依赖
import i18n from './i18n';
const app = createApp(App);
app.use(i18n);
app.mount('#app');
第三步:编写 i18n index.ts文件
import { createI18n } from 'vue-i18n';
import zh from '../i18n/langs/zh';
import en from '../i18n/langs/en';
const messages = {
en,
zh,
};
const i18n = createI18n({
legacy: false,
locale: localStorage.getItem('lang') || 'zh',
// fallbackLocale: "en",
messages,
});
export default i18n;
第四步:编写语言库
英文 en.ts 文件
export default {
messages: {
username: 'username',
password: 'password',
login: 'Sign in',
register: 'register',
language: 'Language',
chinese: 'Chinese',
English: 'English',
email: 'Email',
HoldSession: 'Keep the session',
},
};
中文 zh.ts 文件
export default {
messages: {
username: '用户名',
password: '密码',
login: '登录',
register: '注册',
language: '语言',
chinese: '中文简体',
English: '英文',
email: '邮箱',
HoldSession: '保持会话',
},
};
第五步:使用
<!-- 第一种写法 -->
<h1>{{ $t('messages.username') }}</h1>
<!-- 第二种写法 :placeholder="$t('messages.username')" -->
<el-input type="text" :placeholder="$t('messages.username')" />
<!-- 第三种写法 -->
<h1>{{ $t('messages.' + username) }}</h1>
<!-- 第四种写法 -->
<div v-t="'messages.username'"></div>
第六步:语言切换
<div>
<el-dropdown trigger="click">
<el-button class="language-btn">
{{ $t('messages.language') }}
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="changeLang('zh')">
中文简体
</el-dropdown-item>
<el-dropdown-item @click="changeLang('en')">
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const changeLang = (lang: string) => {
console.log('lang: ' + lang);
locale.value = lang;
localStorage.setItem('lang', lang);
};
</script>
如果有什么疑问请在评论区留下您的问题!!!