vue i18n

// Vue I18n 示例代码

// 安装 vue-i18n
// npm install vue-i18n

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';

// 创建 i18n 实例
const i18n = createI18n({
  locale: 'en', // 设置默认语言
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    zh: {
      message: {
        hello: '你好，世界'
      }
    }
  }
});

// 创建 Vue 应用
const app = createApp({
  data() {
    return {
      msg: 'Hello Vue!'
    };
  },
  methods: {
    toggleLocale() {
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
    }
  },
  template: `
    <div>
      <p>{{ $t('message.hello') }}</p>
      <button @click="toggleLocale">切换语言</button>
    </div>
  `
});

// 使用 i18n 插件
app.use(i18n);

// 挂载应用
app.mount('#app');

解释说明：

1. 安装 vue-i18n：首先需要通过 npm 安装 vue-i18n 包。
2. 创建 i18n 实例：使用 createI18n 方法创建一个 i18n 实例，并设置默认语言和多语言消息。
3. 创建 Vue 应用：使用 createApp 创建一个 Vue 应用，并在模板中使用 $t 方法来获取翻译后的文本。
4. 切换语言：通过 toggleLocale 方法切换当前的语言环境。
5. 挂载应用：最后将应用挂载到 DOM 中。