vue3使用i18n实现一键翻译的功能按钮

在Vue3中，使用i18n实现一键翻译的功能按钮的步骤如下：

1. 安装`vue-i18n`插件

npm install vue-i18n

2. 创建i18n实例

在main.js文件中创建i18n实例，并设置默认语言和语言包：

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

const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  messages: {
    'zh-CN': require('./locales/zh-CN.json'), // 中文语言包
    'en-US': require('./locales/en-US.json') // 英文语言包
  }
})

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

3. 添加翻译按钮

在需要添加翻译按钮的组件中，添加一个按钮，并在点击事件中调用i18n实例的`setLocaleMessage`方法来切换语言：

<template>
  <div>
    <button @click="translate">Translate</button>
    <p>{{ $t('hello') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    translate() {
      // 切换语言
      this.$i18n.setLocaleMessage('zh-CN', require('../locales/en-US.json'))
    }
  }
}
</script>

在上面的代码中，点击按钮后会将语言切换为英文。

4. 创建语言包

在项目根目录下创建一个`locales`文件夹，并在其中创建一个`zh-CN.json`文件和一个`en-US.json`文件，用于存放中文和英文的语言包。例如：

// zh-CN.json
{
  "hello": "你好，世界！"
}

// en-US.json
{
  "hello": "Hello, world!"
}

现在，当我们点击翻译按钮后，页面上的"你好，世界！"会自动切换为"Hello, world!"。

以上就是使用i18n实现一键翻译的功能按钮的全部步骤。