本文主要讲解使用vite2和vue3和ant-design搭建的项目如何使用国际化。

开始

引入插件

这个插件主要是配合i18n进行使用，具体作用可以查看文档。

# npm
npm install @intlify/vite-plugin-vue-i18n -D

# yarn
yarn add @intlify/vite-plugin-vue-i18n -D

下载vue-i18n:

注意：这里使用9.x的版本。

# npm
npm install vue-i18n@next

# yarn
yarn add vue-i18n@next

vite.config.ts中配置：

import { defineConfig, loadEnv } from 'vite';
import vueI18n from '@intlify/vite-plugin-vue-i18n';
import path from 'path';
//...


export default ({ mode }) => {
  return defineConfig({
    plugins: [
     //...
      vueI18n({
        include: path.resolve(__dirname, './src/locales/**')
      }),
    ],
   //...
  });
};

路径写我们要配置国际化语言包的路径，这里我准备在src/locales下配置。

配置语言包

在设置的目录下创建自定义语言包，这里我选择json文件方式配置：

文件名随意取。
zhCN.json

{
  "HelloWorld": "你好世界"
}

en.json

{
  "HelloWorld": "hello,world!"
}

以上我就配置了两种语言，中文和英文，二者的key都是HelloWorld。之后我们会根据这个key来显示和切换语言。

导入配置

我这里设置了一个文件(xxx.ts)来引入设置：

// 国际化
import type { App } from 'vue';
import { createI18n } from 'vue-i18n';
//这个是帮助我们导入自定义语言包的，详情可以看vite-plugin-vue-i18n插件文档
import messages from '@intlify/vite-plugin-vue-i18n/messages';
const i18n = createI18n({
  locale: 'zhCN',//设置默认语言，这个字符串通过上面messages方式导入默认为自定义语言包的文件名（比如这里就'zhCN'和'en'之后我们就可以根据这两个标识来动态的切换语言）
  messages
});
export const setI18n = (app: App) => {
  app.use(i18n);
};

export default i18n;

在main.ts中use注册使用：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
// 国际化
import { setI18n } from './locales';
//...

const app = createApp(App);

setI18n(app);

app.mount('#app');

组件中使用

//导入依赖
import { useI18n } from 'vue-i18n';
import i18n from '@/locales';

//setup标签中使用

const { t } = useI18n();
const localeRef: any = ref(i18n.global.locale);

模板中使用

<div>{{t('HelloWorld')}}</div>

修改语言:

localRef.value = 'en'//设置为英文

ant-design-vue使用国际化

之前我们只设置了自定义字段的国际化，我们引入的组件库要国际化可以使用其自身的国际化方式。

首先导入antd自带的语言包，这里导入两种，中英文。

import zhCN from 'ant-design-vue/es/locale/zh_CN';
import en from 'ant-design-vue/es/locale/en_GB';
//注意，antd中时间相关的组件国际化需要设置moment，因为内部字段是使用的moment的国际化方式

//这里vite只支持es module方式导入，所以请注意模块化引入的方式
import 'moment/dist/locale/zh-cn';
import 'moment/dist/locale/en-gb';

const locale = ref(zhCN);

//设置moment的国际化
 moment.locale('zh-cn');

最后导入语言变量，通过ant-design-vue自带的config组件注册给子组件使用:

这里可以在App.vue中包裹，反正要保证antd的组件包裹在其中

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

这个locale就是我们要切换的语言包。

要修改语言就需要修改locale,注意如果使用了时间相关组件需要再设置moment的国际化。

总结

以上就是国际化的简单应用，这里我推荐一种国际化切换方式就是将语言变量放置在url中比如设置为一个query，当我们分享链接也能保证语言一致了,当然注意每次跳转也买你都要带上这个query哦。