Vue3和i18n实现多语言方式

vue create i18n-app

cd i18n-app
npm run serve

npm install vue-i18n@next

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');

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <nav>
      <ul>
        <li>{{ $t('about') }}</li>
        <li>{{ $t('contact') }}</li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  // 组件逻辑...
};
</script>

<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>
export default {
  methods: {
    toggleLanguage() {
      const currentLocale = this.$i18n.locale;
      const newLocale = currentLocale === 'en' ? 'zh' : 'en';
      this.$i18n.locale = newLocale;
    },
  },
};
</script>