vue3 引入国际化

1. npm 引入 il8n

npm install vue-i18n@9 --save

2.在目录底下建立一个 locale

3.在locale底下建立子文件。例如：中英文转换就建立俩个： zh.json 和 en.json

4. zh.json 内容写：

{

  “chinese”: {
   "t1" : '这是中文'
　}

}

5. en.json内容写：

{

 "Englist":{
   "t1":'this is english'
 }

}

7.在 main.js 引入相对应的文件

import { createI18n } from 'vue-i18n' //引入下载的 il8n 的包
import zh from './locale/zh.json'; //引入中文包
import en from './locale/en.json'; //引入英文包

// 语言文件，可以根据需要扩展
const messages = {
  'zh': zh,
  'en': en
}

// 创建 i18n 实例
const i18n = createI18n({
  locale: 'zh', // 默认语言
  messages,
})

Vue.config.globalProperties.$t = i18n //全局挂在，可以应用在 vue2的写法，但是vue3需要接收。因此 vue3的写法需要另外接收

在 createApp 里面去全局应用 il8n

export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)

  return {
    app
  }
}

8. 在 vue3 的写法是 

在 div 的写法是直接引用 $t 直接使用对象就行

<div >
        <p>{{ $t(' sell.t1 ') }}</p>
</div>

在 vue3 的 setup 语法糖里面的写法是：

const { t } = useI18n() //引入 il8n 国际化

用 const 去接收国际化，然后用 const 的常量去 使用国际化
messageToggle('error', t('sell.t1'))

9.在 vue2的写法是

在 div 的写法是直接引用 $t 直接使用对象就行

<div >
        <p>{{ $t(' sell.t1 ') }}</p>
</div>

在vue2的方法里面的写法是：
messageToggle('error',this.$t('sell.t1'))

类似输入框输入国际的提示内容可以这样做，用一个变量去接收需要显示的文字，然后直接用 this.$t 去接收
this.placeholders = this.$t( 'shoppingCard.t1' )

10. 最后配置一下中英文切换

<!-- 语言切换 -->
        <div class="lang-switch" @click="toggleLanguageDropdown">
          <text class="lang-icon">🌏</text>
          <text class="lang-text">{{ currentLanguageText }}</text>
          
          <!-- 语言切换下拉菜单 -->
          <div class="language-dropdown" v-if="showLanguageDropdown">
            <text v-for="lang in availableLanguages" :key="lang.value" @click.stop="changeLanguage(lang.value)">{{ lang.text }}</text>
          </div >
        </div >


data :{
 
 return{
 
   showLanguageDropdown: false,
      availableLanguages: [
        { value: 'zh', text: '中文' },
        { value: 'en', text: 'English' }
      ],
  
 }
 
}

computed:{

 currentLanguageText() {
      const currentLang = this.availableLanguages.find(lang => lang.value === this.$i18n.locale);
      return currentLang ? currentLang.text : this.$i18n.locale;
    },

},

methods:{
  
  toggleLanguageDropdown() {
      this.showLanguageDropdown = !this.showLanguageDropdown;
    },
    changeLanguage(lang) {
      this.$i18n.locale = lang;
      this.showLanguageDropdown = false;
    },
 
}


scss:{

 .lang-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.3s ease;
  position: relative;

  /* &:hover {
    opacity: 0.8;
  } */
}

.lang-icon {
  color: #666;
  margin-right: 4px; /* Adjusted margin based on design */
}

.lang-text {
  color: #333;
}

.arrow-down {
    color: #666;
    margin-left: 4px; /* Adjusted margin based on design */
}

/* 语言切换下拉菜单样式 */
.language-dropdown {
  position: absolute;
  top: 35px;
  right: -10px;
  background-color: #00305C;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
  z-index: 9999;
  min-width: 120px;
  padding: 4px 0;

  text {
    display: block;
    padding: 8px 15px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    display: block;
    &:hover {
      background-color: #ffffff80;
    }
  }
}

}