Vue3+ts+vite 国际化处理

Vue3+ts+vite 国际化处理

1、安装 vue-i18n 插件 楼主这里使用的是 “^9.2.0-beta.17” 版本
2、在src路径下创建 locale 文件夹
3、这里en-US文件夹和zh-CN文件夹放置的是相关的配置文件 楼主建议 每个模块分别在模块中创建语言文件

export default {
  'settings.title': '页面配置',
  'settings.themeColor': '主题色',
  'settings.content': '内容区域',
  'settings.search': '搜索',
  'settings.language': '语言',
  'settings.navbar': '导航栏',
  'settings.menuWidth': '菜单宽度 (px)',
  'settings.navbar.theme.toLight': '点击切换为亮色模式',
  'settings.navbar.theme.toDark': '点击切换为暗黑模式',
  'settings.navbar.alerts': '消息通知',
  'settings.menu': '菜单栏',
  'settings.tabBar': '多页签',
  'settings.footer': '底部',
  'settings.otherSettings': '其他设置'
};

4、src/loacle/zh-CN.ts 和 src/loacle/en-US.ts 中引入的都是 所有 zh-CN语言文件和en-US言文件

import localeMessageBox from '@/components/message-box/locale/zh-CN';
import localeLogin from '@/views/login/locale/zh-CN';

import localeWorkplace from '@/views/dashboard/workplace/locale/zh-CN';

import localeMonitor from '@/views/dashboard/monitor/locale/zh-CN';

import localeSearchTable from '@/views/list/search-table/locale/zh-CN';
import localeCardList from '@/views/list/card/locale/zh-CN';

import localeStepForm from '@/views/form/step/locale/zh-CN';
import localeGroupForm from '@/views/form/group/locale/zh-CN';

import localeBasicProfile from '@/views/profile/basic/locale/zh-CN';

import localeDataAnalysis from '@/views/visualization/data-analysis/locale/zh-CN';
import localeMultiDAnalysis from '@/views/visualization/multi-dimension-data-analysis/locale/zh-CN';

import localeSuccess from '@/views/result/success/locale/zh-CN';
import localeError from '@/views/result/error/locale/zh-CN';

import locale403 from '@/views/exception/403/locale/zh-CN';
import locale404 from '@/views/exception/404/locale/zh-CN';
import locale500 from '@/views/exception/500/locale/zh-CN';

import localeUserInfo from '@/views/user/info/locale/zh-CN';
import localeUserSetting from '@/views/user/setting/locale/zh-CN';

import localeSettings from './zh-CN/settings';

export default {
  'menu.dashboard': '仪表盘',
  'menu.list': '列表页',
  'menu.result': '结果页',
  'menu.exception': '异常页',
  'menu.form': '表单页',
  'menu.profile': '详情页',
  'menu.visualization': '数据可视化',
  'menu.user': '个人中心',
  'navbar.docs': '文档中心',
  'navbar.action.locale': '切换为中文',
  ...localeSettings,
  ...localeMessageBox,
  ...localeLogin,
  ...localeWorkplace,

  ...localeMonitor,
  ...localeSearchTable,
  ...localeCardList,
  ...localeStepForm,
  ...localeGroupForm,
  ...localeBasicProfile,
  ...localeDataAnalysis,
  ...localeMultiDAnalysis,
  ...localeSuccess,
  ...localeError,
  ...locale403,
  ...locale404,
  ...locale500,
  ...localeUserInfo,
  ...localeUserSetting,
};

5、src/loacle/index.ts 创建国际化 管理国际化 暴露国际化

import { createI18n } from 'vue-i18n';
import en from './en-US';
import cn from './zh-CN';

//设置项目所需语言
export const LOCALE_OPTIONS = [
  { label: '中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' },
];
//获取缓存 设置初始化语言
const defaultLocale = localStorage.getItem('locale') || 'zh-CN';

const i18n = createI18n({
  locale: defaultLocale,
  fallbackLocale: 'en-US',
  allowComposition: true,
  messages: {
    'en-US': en,
    'zh-CN': cn,
  },
});

export default i18n;

5、在main.ts中引入src/loacle/index.ts并且use一下
import i18n from './locale'
app.use(i18n)
6、然后创建 loacle的hooks方便调用自定义

import { useI18n } from 'vue-i18n';
import { computed } from "vue";
import { Message } from "@arco-design/web-vue";

export default function useLocale() {
  const i18 = useI18n()
  //返回当前的语言
  const currentLocale = computed(() => {
    return i18.locale.value
  })
  //切换语言
  const changeLocale = (value: string) => {
    i18.locale.value = value;
    localStorage.setItem('locale', value);
    Message.success(i18.t('navbar.action.locale'));
  };
  return {
    currentLocale,
    changeLocale
  }
}

7、这样在模板中使用语言切换了

<template>
	<button type="primary">
  	{{ $t('login.form.login') }}
  </button>

  <a-space class="n-ps-top-base n-ps-left-base">
      <a-dropdown trigger="click" @select="changeLocale">
        <a-button type="primary">切换语言</a-button>
        <template #content>
          <a-doption
              v-for="item in locales"
              :key="item.value"
              :value="item.value"
          >
            {{ item.label }}
          </a-doption>
        </template>
      </a-dropdown>

</template>




<script setup lang="ts">
import useLocale from '@/hooks/loacle';
import {LOCALE_OPTIONS} from '@/loacle';

const locales = [...LOCALE_OPTIONS];
const {changeLocale} = useLocale();

</script>

<style scoped lang="scss">


</style>

8、arco的国际化处理，其他的基本类似
首先在app.vue中引入ui插件自带的语言包

@import enUS from '@arco-design/web-vue/es/locale/lang/en-us';

@import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';`

然后引入
_import _useLocale _from _"@/hooks/loacle";
@/hooks/loacle暴露了useLocale函数，里面有切换语言的方法和当前的语言状态
这样我们可以用vue的计算属性去暴露给视图

const { currentLocale } = useLocale();
const locale = computed(() => {
  switch (currentLocale.value) {
    case "zh-CN":
      return zhCN;
    case "en-US":
      return enUS;
    default:
      return zhCN;
  }
})

<a-config-provider :locale="locale">
  <router-view></router-view>
</a-config-provider>