Cxiaomu的博客

前篇：结合本博客之前的国际化多语言的实现与实际业务场景，意识到人工在项目中手动配置、替换多语言花费的人力成本较高，于是衍生出其他的管理方案，解放双手，核心原理就是多语言配置文件与 Excel 文件相互转换、文件读写。因为Vika单词插入记录最多10条，此处就不演示直接与Vika进行多语言管理的实现，代码在博主本地，有需要的可以私。

经了解，可是通过在线表格的方式，拉取最新的多语言，在编译前执行已经封装好的操作，便可直接替换已有翻译，降本提效。于是，有了这篇文章。原理：在编译前，拉取在线表格数据，替换本地多语言配置文件。Vika，NodeJS，在线表格。除此之外，还可对本地excel进行多语言翻译数据读取。

当涉及到国际化的内容时，系统往往需要配有多套语言翻译文件，并支持当前语言环境的获取和切换当前语言功能，随之整个系统将切换成对应的多语言。直接在需要应用的地方引入并使用就可以，不需要传任何参数，组件自身会根据当前语言环境自动获取当前语言。

Vue-i18n国际化多语言使用

Vue- i18n 国际化多语言配置

Vue3+TypeScript+Vite+SCSS+（Element Plus、Ant Design Vue、Naive UI）因调研需要，需在同一个项目中集成好几种UI组件库的多语言实现，查看各种组件库的表现情况，以便选定组件库。注意：这只在调研过程中会如此，实际开发项目中极少存在一个项目中集成多个UI组件库的情况。本demo实际试验阿拉伯语、法语、葡萄牙语、英语、中文五种语言。

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

在src目录下创建lang文件夹，内部创建index.ts【多语言入口文件】 、zh.ts【中文语言配置】、en.ts【英文语言配置】。由于上一步使用了app.config.globalProperties挂载到全局，所有vue页面都可用$t来使用。但是，在ts中，直接使用是不行的，需要另外引入，setup 有两种写法。