vue2和vue3的多语言解决方案及使用方法-爱代码爱编程

Vue2 和 Vue3 在多语言解决方案方面都可以使用 vue-i18n 插件。vue-i18n 是一个基于 Vue.js 的国际化插件，它提供了多语言支持和实现了翻译的功能。以下是如何在 Vue2 和 Vue3 中使用 vue-i18n 的简要说明：

Vue2 的多语言解决方案:

在 Vue2 中，可以使用 vue-i18n 插件来实现多语言支持。要使用 vue-i18n，首先需要安装：

npm install vue-i18n

然后在main.js中引入并配置 vue-i18n：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      hello: 'Hello'
    }
  },
  cn: {
    message: {
      hello: '你好'
    }
  }
}

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages
})

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

<template>
  <div>
    <h1>{{ $t('message.hello') }}</h1>
    <button @click="changeLanguage">切换语言</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage() {
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'cn' : 'en';
    }
  }
}
</script>

Vue3 的多语言解决方案：

在 Vue3 中，仍然可以使用 vue-i18n 插件，但需要使用兼容 Vue3 的版本：

npm install vue-i18n@next

在 main.js 中引入和配置 vue-i18n：        

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

const messages = {
  en: {
    message: {
      hello: 'Hello'
    }
  },
  cn: {
    message: {
      hello: '你好'
    }
  }
}

const i18n = createI18n({
  locale: 'en', // 默认语言
  messages
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

<template>
  <div>
    <h1>{{ t('message.hello') }}</h1>
    <button @click="changeLanguage">切换语言</button>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t, locale } = useI18n()

    const changeLanguage = () => {
      locale.value = locale.value === 'en' ? 'cn' : 'en'
    }

    return {
      t,
      changeLanguage
    }
  }
}
</script>