vue-i18n如何与element-plus自动导入组件结合使用？

前言

之前就想使用i18n国际化插件，但是一直没有使用的机会，正好这次要搭建一个vite+vue3的基础项目，使用了Element-plus框架，并设设置自动引入组件，刚好也需要设置国际化，所以打算将两者结合使用，通过结合Element-plus与vue-i18n的方式来实现多语言切换，废话不多说现在开始吧！（注：之前已经搭好了基本的框架，详细可以参考vite+vue3如何配置ESLint与prettier？）

Element-Plus引入使用

与Vue相配套的UI框架Element UI一定是不二之选，平时用Element也比较多，Vue3出来后，Element也正式升级为Element Plus，相比之前的框架，Element Plus采用Vue3的新特性，使用OptionsAPI、TS来重写，并且在之前的基础上加了很多新的组件和特性，而且官方文档也非常详细，按照给出的文档引入框架，使用起来非常顺利，本项目使用文档中的自动导入结合Vite来引入Element Plus框架。

下载Element-Plus╮(‵▽′)╭自动导入插件

# 下载Element Plus包
npm install element-plus --save
# 安装自动导入ElementPlus的两款插件
npm install -D unplugin-vue-components unplugin-auto-import 

配置vite.config.ts文件

安装好插件后在配置文件中vite.config.ts编写自动导入Element-plus插件的代码。

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// Element-plus自动导入
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

const pathResolve = (dir: string): any => {
	return resolve(__dirname, '.', dir);
};

con