Vue.js使用i18n国际化时如何获取当前locale语言值

第一步：补全i18n插件注册 #

你当前的main.js中未引入和注册vue-i18n插件，需要先完成基础配置才能获取当前语言标识：

• 首先安装对应Vue3版本的vue-i18n依赖，执行命令：
  npm install vue-i18n@9
• 新建i18n配置文件，路径可设为src/config/i18n/index.js，写入初始化逻辑：

import { createI18n } from 'vue-i18n'
// 替换为你项目实际的语言包引入路径
import en from './locales/en.json'
import zh from './locales/zh.json'

const i18n = createI18n({
  legacy: false, // 组合式API模式下必须设为false
  locale: localStorage.getItem('sys_locale') || 'en', // 默认语言，可根据业务调整
  fallbackLocale: 'en',
  messages: {
    en,
    zh
  }
})

export default i18n

• 修改main.js，引入并注册i18n实例：

import { createApp } from "vue";
import { createPinia } from "pinia";
import "./index.css";
import App from "./App.vue";
import router from "./router";
import i18n from "@/config/i18n"; // 新增引入i18n
import "@/config/vee-validate/rules";
import "@/config/vee-validate/messages";

const app = createApp(App);

app.use(createPinia());
app.use(router);
app.use(i18n); // 新增注册i18n插件
app.mount("#app");

第二步：判断当前locale是否严格等于'en' #

根据使用场景不同，获取locale的方式略有区别：

• 场景1：Vue3组合式API（<script setup>语法）
  用useI18n钩子获取响应式locale，直接判断即可，建议用计算属性返回布尔值，语言切换时结果会自动更新：

  <script setup>
  import { computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  const { locale } = useI18n()
  
  // 响应式布尔值，自动跟随语言变化
  const isEnLocale = computed(() => locale.value === 'en')
  
  // 仅需一次性判断时直接取值即可
  // const isEn = locale.value === 'en'
  </script>
  

• 场景2：选项式API组件
  通过组件实例上的$i18n对象获取：

  export default {
    computed: {
      isEnLocale() {
        return this.$i18n.locale === 'en'
      }
    }
  }
  

• 场景3：非组件的JS/TS文件（如路由守卫、vee-validate配置文件）
  直接引入之前导出的i18n实例，读取全局locale即可：

  import i18n from '@/config/i18n'
  
  // legacy: false模式下需要加.value，legacy: true模式直接取i18n.global.locale即可
  const isEn = i18n.global.locale.value === 'en'
  

注意：如果你的i18n初始化时设置了legacy: true（兼容Vue2写法模式），所有取值时不需要加.value后缀。

内容的提问来源于stack exchange，提问作者jangobango332