vue3版本的i18n语言切换功能

vue3版本的i18n语言切换功能

1 安装i18n

npm install vue-i18n

2 语言配置文件

// 路径：/i18n/language/en_US.js
const en_US =  {
  login:{
      'title' : 'this title',
      'username' : 'Please enter the user name',
      'password' : 'Please enter your password',
  },
}
export default en_US
// 其他语言包同格式

3 初始化语言配置

import { createI18n } from 'vue-i18n'   //引入vue-i18n组件
import zh_CN from './language/zh_CN'
import en_US from './language/en_US'
​
console.log(zh_CN, '----')
const messages = {
  'zh_CN': zh_CN,   // 中文语言包
  'en_US': en_US,    // 英文语言包
}
console.log(23333, messages, zh_CN.login)
  //注册i8n实例并引入语言文件
 const localeData = {
    legacy: false, // composition API
    locale: localStorage.getItem('language') || 'zh-CN',
    messages,
 }
​
 // setup i18n instance with glob
export default createI18n(localeData);

4 main.js引入语言配置

// 国际化组件
import i18n from './assets/i18n/index';
Vue.use(i18n);

5 页面中的应用和语言切换

<script setup>
  import { useI18n } from "vue-i18n";
  const { t, locale } = useI18n();
  console.log(t('login.title'), '===')
  
  // 切换
  function handleLang (val) {
    console.log(23333, val, locale)
    locale.value = val;
    localStorage.setItem('language', val)
  };
 
</script>
<template>
 <div style="margin-top: 100px">
  <div>
    {{$t("login.title")}}
  </div>
  <button @click="handleLang('zh_CN')">中文</button>
  <button @click="handleLang('en_US')">英文</button>
 </div>
</template>

\