Vue3国际化

前言

想要给我的网盘项目加上国际化的东西

开始

vue

安装

pnpm add vue-i18n@9

基本使用

接着就是创建想要的翻译的语言了

在src目录下面创建一个lang文件夹放一些要翻译的语言，例如:zh.ts,en.ts,kor.ts,jp.ts

export default {
    "首页":"首页"
}

export default {
    "首页":"index"
}

创建一个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('arco-locale') || 'zh-CN';

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

export default i18n;

进行注册使用

import { createApp } from 'vue'

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')

创建一个hook来进行切换语言

import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
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) => {
    if (i18.locale.value === value) {
      return;
    }
    i18.locale.value = value;
    localStorage.setItem('arco-locale', value);
    Message.success(i18.t('navbar.action.locale'));
  };
  return {
    currentLocale,
    changeLocale,
  };
}

这些就是前端进行静态页面来渲染语言了，对于那些需要动态渲染语言的，翻译数据来自后端。

应用到页面上

<a-link>{{ $t('userInfo.viewAll') }}</a-link>