当前位置：首页 > VUE

vue实现翻译

2026-01-07 19:41:56VUE

Vue 实现翻译功能的方法

使用 i18n 插件实现多语言切换

安装 vue-i18n 插件：

npm install vue-i18n

创建语言资源文件（如 en.json 和 zh.json）：

// en.json
{
  "welcome": "Welcome",
  "hello": "Hello, {name}!"
}

// zh.json
{
  "welcome": "欢迎",
  "hello": "你好, {name}!"
}

在 Vue 项目中配置 i18n：

import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh.json'

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

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

在组件中使用翻译：

<template>
  <div>
    <p>{{ $t('welcome') }}</p>
    <p>{{ $t('hello', { name: 'John' }) }}</p>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

调用第三方翻译 API

创建翻译服务：

// translationService.js
import axios from 'axios'

const translateText = async (text, targetLang) => {
  const apiKey = 'YOUR_API_KEY'
  const response = await axios.post(
    'https://translation.googleapis.com/language/translate/v2',
    {
      q: text,
      target: targetLang
    },
    {
      params: { key: apiKey }
    }
  )
  return response.data.data.translations[0].translatedText
}

export { translateText }

在 Vue 组件中使用：

<template>
  <div>
    <textarea v-model="inputText"></textarea>
    <button @click="translate">翻译</button>
    <p>{{ translatedText }}</p>
  </div>
</template>

<script>
import { translateText } from './translationService'

export default {
  data() {
    return {
      inputText: '',
      translatedText: ''
    }
  },
  methods: {
    async translate() {
      this.translatedText = await translateText(this.inputText, 'zh')
    }
  }
}
</script>

实现实时翻译输入

利用 watch 或 v-model 结合防抖实现实时翻译：

<template>
  <div>
    <textarea v-model="inputText" @input="debouncedTranslate"></textarea>
    <p>{{ translatedText }}</p>
  </div>
</template>

<script>
import { translateText } from './translationService'
import { debounce } from 'lodash'

export default {
  data() {
    return {
      inputText: '',
      translatedText: '',
      debouncedTranslate: debounce(this.translate, 500)
    }
  },
  methods: {
    async translate() {
      if (this.inputText.trim()) {
        this.translatedText = await translateText(this.inputText, 'zh')
      }
    }
  }
}
</script>

浏览器原生 API 实现简单翻译

使用浏览器的 Intl API 实现基本翻译：

const translateNumber = (number, locale) => {
  return new Intl.NumberFormat(locale).format(number)
}

const translateDate = (date, locale) => {
  return new Intl.DateTimeFormat(locale).format(date)
}