第一部分:准备工作
首先,我们需要创建一个基本的 Vue 3 应用。如果你对 Vue 3 不熟悉,别担心,我们将从头开始。打开你的命令行工具,执行以下命令:
vue create i18n-app
这将创建一个名为 “i18n-app” 的新 Vue 3 应用。安装完成后,进入应用目录并启动开发服务器:
cd i18n-app
npm run serve
现在,打开你最喜欢的代码编辑器,并导航到 src
目录下的 main.js
文件。我们将在这里配置我们的 i18n。
第二部分:安装和配置 i18n
在 main.js
文件中,我们首先需要安装 i18n 库。运行以下命令来安装:
npm install vue-i18n@next
安装完成后,我们需要导入和配置 i18n。在 main.js
文件中,添加以下代码:
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';
const i18n = createI18n({
locale: 'en', // 默认语言为英语
messages: {
en: {
welcome: 'Welcome to my blog!',
about: 'About',
contact: 'Contact',
// 更多英语文本...
},
zh: {
welcome: '欢迎来到我的博客!',
about: '关于',
contact: '联系',
// 更多中文文本...
},
// 更多语言...
},
});
createApp(App).use(i18n).mount('#app');
在上述代码中,我们创建了一个 i18n
实例,并配置了默认语言为英语(‘en’)。然后,我们定义了不同语言的文本消息。你可以根据需要添加更多语言和对应的文本。
第三部分:在组件中使用多语言
现在,我们已经配置好了 i18n,让我们在组件中使用多语言文本。打开 App.vue
文件,并修改为以下内容:
<template>
<div>
<h1>{{ $t('welcome') }}</h1>
<nav>
<ul>
<li>{{ $t('about') }}</li>
<li>{{ $t('contact') }}</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
// 组件逻辑...
};
</script>
在上述代码中,我们使用 $t
方法来访问 i18n 实例中的文本消息。例如,$t('welcome')
将显示当前选择语言下的欢迎消息。
第四部分:切换语言
最后,我们来实现切换语言的功能。在 App.vue
文件中,我们添加一个简单的按钮来切换语言。修改 template
部分如下:
<template>
<div>
<h1>{{ $t('welcome') }}</h1>
<nav>
<ul>
<li>{{ $t('about') }}</li>
<li>{{ $t('contact') }}</li>
</ul>
</nav>
<button @click="toggleLanguage">切换语言</button>
</div>
</template>
然后,在 script
部分添加以下代码:
<script>
export default {
methods: {
toggleLanguage() {
const currentLocale = this.$i18n.locale;
const newLocale = currentLocale === 'en' ? 'zh' : 'en';
this.$i18n.locale = newLocale;
},
},
};
</script>