vue 多语言

// Vue 多语言示例代码

// 1. 安装 vue-i18n 库
// npm install vue-i18n

// 2. 创建 i18n.js 文件并配置多语言
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export function createI18n(locale = 'en') {
  return new VueI18n({
    locale, // 设置默认语言为英语
    messages: {
      en: {
        message: {
          hello: 'hello world'
        }
      },
      zh: {
        message: {
          hello: '你好，世界'
        }
      }
    }
  });
}

// 3. 在 main.js 中引入并使用
import { createI18n } from './i18n';

const i18n = createI18n();

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

// 4. 在组件中使用多语言
<template>
  <div id="app">
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLocale">切换语言</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLocale() {
      // 切换语言
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
    }
  }
}
</script>

解释说明：

1. 安装依赖：首先需要安装 vue-i18n 库，这是 Vue 的国际化插件。
2. 配置多语言：在 i18n.js 文件中配置支持的语言及其对应的翻译内容。这里配置了英语 (en) 和中文 (zh)。
3. 引入并使用：在 main.js 中引入并实例化 i18n，将其挂载到 Vue 实例上。
4. 组件中使用：在组件模板中通过 $t 方法获取对应语言的翻译内容，并提供一个按钮来切换语言。

这样就可以实现 Vue 项目的多语言功能。