在vue和 js 、ts 数据中使用 vue-i18n，切换语言环境时，标签文本实时变化

在Vue和JavaScript/TypeScript中使用vue-i18n插件来实现语言环境的切换，并使得标签文本实时变化，你需要按以下步骤操作：

1. 安装vue-i18n插件。

npm install vue-i18n

2. 在Vue项目中设置vue-i18n。

// 在你的 Vue 应用中
import Vue from 'vue';
import VueI18n from 'vue-i18n';
 
// 如果使用 TypeScript，确保你已经配置了 .d.ts 文件
 
Vue.use(VueI18n);
 
// 定义语言包
const messages = {
  en: {
    message: {
      hello: 'Hello world'
    }
  },
  zh: {
    message: {
      hello: '你好世界'
    }
  }
};
 
// 创建 VueI18n 实例并配置语言环境和语言包
const i18n = new VueI18n({
  locale: 'en', // 设置当前语言环境为英文
  fallbackLocale: 'en', // 如果当前语言环境不存在，则回退到英文
  messages, // 语言包
});
 
new Vue({
  el: '#app',
  i18n,
  // ...
});

3. 在Vue模板中使用$t函数来标记需要国际化的文本。

<template>
  <div id="app">
    <p>{{ $t("message.hello") }}</p>
    <button @click="changeLanguage('zh')">中文</button>
    <button @click="changeLanguage('en')">English</button>
  </div>
</template>

4. 实现一个方法来切换语言环境。

methods: {
  changeLanguage(lang) {
    this.$i18n.locale = lang; // 切换当前语言环境
  }
}

当你点击按钮切换语言时，Vue模板中的文本会立即更新以反映新的语言环境。这是因为vue-i18n通过Vue的响应式系统来保持国际化的文本实时更新。