国际化--vue3 +ts 结合vue-i18n插件的使用

• Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到您的 Vue.js 应用程序中。

• 安装v-uei18n插件：

  pnpm install vue-i18n@9
  

• 进行全局注册与api配置：

创建-locale文件夹-->放入index.ts文件

在locale文件夹中创建 en-US.ts文件/zh-CN.ts文件

以上两个文件为中英语言数据放置处

import test from '@/views/locale/en-US'
export default {
  'menu.dashboard': 'Dashboard',
  'menu.server.dashboard': 'Dashboard-Server',
  'menu.server.workplace': 'Workplace-Server',
  'menu.server.monitor': 'Monitor-Server',
  'menu.list': 'List',
  'menu.result': 'Result',
  'menu.exception': 'Exception',
  'menu.form': 'Form',
  'menu.profile': 'Profile',
  'menu.visualization': 'Data Visualization',
  'menu.user': 'User Center',
  'menu.arcoWebsite': 'Arco Design',
  'menu.faq': 'FAQ',
  'navbar.docs': 'Docs',
  'navbar.action.locale': 'Switch to English',
  // ...localeSettings,
  ...test
};
​

在index.ts中设置配置项：

//1.引入createI18n 创建vue-I18n实例 创建api实例 并完成在应用中的注册
import { createI18n } from 'vue-i18n';
​
import en from './en-US';
import cn from './zh-CN';
​
//2、以下用于在页面切换语言--设置语言环境
export const LOCALE_OPTIONS = [
  { label: '中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' },
];
​
const defaultLocale = localStorage.getItem('arco-locale') || 'zh-CN';
​
const i18n = createI18n({
  locale: defaultLocale,//本地化的Vue应用程序的语言  //defaultLocale 为获取本地偏好语言（从浏览器本地存储中）或者是中文
  fallbackLocale: 'en-US',//回退语言 如果在翻译 API 中指定的关键资源在 的语言中找不到，则要回退到的语言
  legacy: false,
  allowComposition: true,//是否允许组合式
  globalInjection: true, // 全局模式，可以直接使用 $t  默认值为true
  messages: { //要使用翻译 API 翻译的区域设置消息。
    'en-US': en,
    'zh-CN': cn,
  },
    
});
​
export default i18n;
​

在main.js文件中添加配置：

import vue_i18n from './locale'
// import vue_i18n from './locale/index'
// 以上两语句的作用是一样的  包管理器会自动识别目录/或页面中导出的模块
​
app.use(vue_i18n)

• 使用方法：

  ​
  ​
  <div>{{$t('menu.home')}}</div>//常使用
  // 未配置全局
  <div>{{t('menu.home')}}</div>
  ​
  <script lang="ts" setup>
  ​
  // 使用后者时需要引入 t
  import { useI18n } from 'vue-i18n'
  //const { t } = useI18n()
  </script>

  

　　b、ts 中使用（）//暂时不适用 切换语言未实现

​



<script lang="ts" setup>
​
import i18n from '@/locales/index'
​
const t = i18n.global.t
const menuHome = { name: t('menus.home') }
​
{{menuHome.name}}//html中使用项
</script>
​

• 切换语言配置：

  const { locale } = useI18n()
  // 设置当前语言环境的对象
  const state = reactive({
    curLanguage: 'zh-CN',
  })
  ​
  const changeLanguage = () => {
      console.log('asd')
    state.curLanguage =( state.curLanguage === 'zh-CN' ? 'en-US' : 'zh-CN')
    locale.value = state.curLanguage
      //主要使用语句
  }
  ​
  <template>
   <div>{{ $t('test.lan') }}</div>
  <button @click="changeLanguage()"></button>
  </template>
  ​

  学后提问：

  在某一界面单独使用locale.value进行语言切换 --引起整个项目语言的切换？ 效果？