vue实现翻译
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
注册 Google Cloud Translation API 或百度翻译 API 获取 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)
}注意事项
- 第三方 API 通常有请求限制，需处理错误和限流
- 敏感内容应避免直接发送到外部 API
- 考虑使用本地缓存存储常用翻译结果
- 对于复杂项目，建议结合 i18n 和 API 翻译方案
