如何用option标签切换Vue.js 3网站语言（基于vue-i18n）

AI 小北

2026-7-12

Vue 3 + vue-i18n 下拉框切换语言实现方案

核心逻辑

你的下拉框选项值（english/persian）和vue-i18n配置的locale标识（en/ir）不匹配，需要先建立两者的映射关系，再通过vue-i18n的API动态修改locale值完成切换。

具体实现

组合式API（`<script setup>`）方案

因为你开启了allowComposition: true，推荐使用组合式API实现：

<template>
  <div>
    <!-- 测试翻译文本 -->
    <p>{{ $t('hello') }}</p>

    <!-- 语言切换下拉框 -->
    <select v-model="selectedLang">
      <option value="english">English</option>
      <option value="persian">Persian</option>
    </select>
  </div>
</template>

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

// 获取i18n实例的locale响应式属性
const { locale } = useI18n()

// 建立下拉框值与locale标识的映射
const langMap = {
  english: 'en',
  persian: 'ir'
}
// 反向映射，用于初始化下拉框默认选中值
const reverseLangMap = Object.fromEntries(Object.entries(langMap).map(([key, val]) => [val, key]))

// 计算属性处理双向绑定
const selectedLang = computed({
  get() {
    return reverseLangMap[locale.value]
  },
  set(newVal) {
    // 修改locale完成语言切换
    locale.value = langMap[newVal]
  }
})
</script>

选项式API方案

如果你的项目使用选项式API，可参考以下实现：

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <select @change="handleLangChange">
      <option value="english" :selected="$i18n.locale === 'en'">English</option>
      <option value="persian" :selected="$i18n.locale === 'ir'">Persian</option>
    </select>
  </div>
</template>

<script>
export default {
  methods: {
    handleLangChange(e) {
      const langMap = {
        english: 'en',
        persian: 'ir'
      }
      // 直接修改i18n实例的locale属性
      this.$i18n.locale = langMap[e.target.value]
    }
  }
}
</script>