diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index c9d2e59..0710d35 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -9,7 +9,7 @@ export default defineUserConfig({ locales : { "/" : { lang : "zh-CN", - title : "中文" + title : "VoerkaI18n" }, "/en/" : { lang : "en-US", @@ -22,6 +22,7 @@ export default defineUserConfig({ name : "wxzhang", url : "https://gitee.com/zhangfisher/voerka-i18n", }, + iconAssets : "iconfont", iconPrefix : "iconfont icon-", logo : "/logo.svg", home : "/zh/home", diff --git a/docs/.vuepress/public/images/VoerkaI18n群二维码.png b/docs/.vuepress/public/images/VoerkaI18n群二维码.png new file mode 100644 index 0000000..891c725 Binary files /dev/null and b/docs/.vuepress/public/images/VoerkaI18n群二维码.png differ diff --git a/docs/.vuepress/sidebar/zh.ts b/docs/.vuepress/sidebar/zh.ts index 35963a5..1b99622 100644 --- a/docs/.vuepress/sidebar/zh.ts +++ b/docs/.vuepress/sidebar/zh.ts @@ -8,6 +8,9 @@ export const zh = { "", "install.md", "get-started.md", + "versions.md", + "support.md", + "history.md" ] }, { @@ -37,7 +40,10 @@ export const zh = { "customformatter", "langpack", "autotranslate", - "framework" + "framework", + "remoteLoad", + "lngpatch", + "langedit" ] }, { diff --git a/docs/readme.md b/docs/readme.md index d52df11..5723bdf 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -6,13 +6,12 @@ heroImage: /logo.svg heroText: VoerkaI18n tagline: 适用于Nodejs/Vue/React的国际化解决方案 actions: + - text: 安装 + link: /zh/guide/intro/install + type: primary - text: 快速入门 link: /zh/guide/intro/get-started - - text: 源码 - link: https://gitee.com/zhangfisher/voerka-i18n - type: secondary - features: - title: 工程化支持 icon: markdown @@ -20,7 +19,7 @@ features: link: - title: 集成自动翻译 - icon: slides + icon: tab details: 调用在线翻译服务API支持对提取的文本进行自动翻译,大幅度提高工程效率 link: @@ -44,16 +43,37 @@ features: details: 支持monorepo工程下多库进行语言切换的联动机制 link: - - title: 自动扩展工具 + - title: 工具链 icon: palette - details: 提供Vue/React/Babel等扩展插件,简化各种应用下 + details: 提供Vue/React/Babel等扩展插件,简化各种应用开发 link: - - title: 扩展特性 + - title: 插值变量 icon: contrast - details: 强大的插值变量机制,能扩展支持复数、日期、货币等灵活强大的多语言机制 + details: 强大的插值变量机制,能扩展支持复数、日期、货币等灵活强大的多语言特性 link: -footer: MIT Licensed | Copyright © 2022-present wxzhang + - title: 语言补丁 + icon: palette + details: 在应用上线后发现错误时可以在线修复 + link: + + - title: 动态增加语种 + icon: blog + details: 可以在应用上线后动态增加语种支持 + link: + + - title: 扩展在线编辑 + icon: info + details: 很容易扩展支持在线语言包编辑 + link: + + - title: 复数支持 + icon: contrast + details: 灵活而强大的复数机制 + link: + + +footer: MIT Licensed | Copyright © 2022-present wxzhang --- \ No newline at end of file diff --git a/docs/zh/guide/advanced/langedit.md b/docs/zh/guide/advanced/langedit.md new file mode 100644 index 0000000..8672f97 --- /dev/null +++ b/docs/zh/guide/advanced/langedit.md @@ -0,0 +1,16 @@ +# 在线编辑语言包 + +利用**动态加载语言包**的机制,开发者可以非常容易就开发出`让用户自行编辑界面语言`的功能。 + +请详细阅读[`远程加载语言包`](./remoteLoad)的实现过程,其基本思路如下: +- 后端采用数据库来保存语言包,每一个语言包可以用一个表或多个表存储。 +- 编写对应的编辑语言包的Web API,实现通过API修改语言包功能 +- 前端代码重写语言包加载器函数,将原来的读取静态语言包的方式,修改为采用API读取 +- 前端增加编辑语言包的界面 + + + + + + + diff --git a/docs/zh/guide/advanced/lngpatch.md b/docs/zh/guide/advanced/lngpatch.md new file mode 100644 index 0000000..50edd43 --- /dev/null +++ b/docs/zh/guide/advanced/lngpatch.md @@ -0,0 +1,6 @@ +# 语言包补丁 + +在实际应用中,我们经常会在应用上线后,发现应用中的语言翻译错误,此时就可以利用`voerkai18n`的语言包补丁特性来解决此问题。 +利用`voerkai18n`的语言包补丁特性,您就可以随时修复翻译错误,而不需要重新打包应用。 + +启用语言包补丁功能需要注册默认的语言包加载器,使用方法详见`动态加载语言包`介绍。 diff --git a/docs/zh/guide/advanced/remoteLoad.md b/docs/zh/guide/advanced/remoteLoad.md new file mode 100644 index 0000000..1f816de --- /dev/null +++ b/docs/zh/guide/advanced/remoteLoad.md @@ -0,0 +1,246 @@ +# 远程加载语言包 + +## 前言 +`voerkai18n`默认将要翻译的文本内容经编译后保存在当`languages`文件夹下,当打包应用时会与工程一起进行打包进工程源码中。这会带来以下问题: +- 翻译语言包是源码工程的一部分,当要翻译的语种较多时,会增加源码包大小。 +- 如果产品上线后发现翻译问题,则需要重新进行整个工程的打包 +- 上线后要增加一种语言,同样需要再次进行走一次打包流程 + +`voerkai18n`针对这些问题,支持了远程加载语言包的功能,可以支持线上`动态增加支持的语言`,`在线翻译补丁`等特性。 + + +## 使用方法 + +### 准备 + +为说明如何从远程加载语言包,我们将假设以下的应用: +应用`chat`,依赖于`user`、`manager`、`log`等三个库,均使用了`voerkiai18n`作为多语言解决方案 +当执行完`voerkai18n compile`后,项目结构大概如下: +```javascript +chat + |-- languages + | |-- index.js + | |-- idMap.js + | |-- runtime.js + | |-- settings.json + | |-- cn.js + | |-- en.js + | |-- translates + | |-- default.json + |-- index.js + |-- package.json //name=chat + +``` +打开`languages/index.js`,大概如下: +```javascript +// .... +const scope = new i18nScope({ + id: "chat", // 当前作用域的id,自动取当前工程的package.json的name + loaders:{ + "en" : ()=>import("./en.js") + }, + //..... +}) +/// .... +``` +- 可以看到在`languages/index.js`中创建了一个以当前工程`package.json`的`name`为`id`的`i18nScope`实例,然后注册到全局`VoerkaI18n`实例中。 +- 为`en`语言创建了一个异步加载器,用来异步加载`en`语言包。 +- 当打包`chat`应用时,`cn.js`、`en.js`等语言包均作为源码的一部分打包,差别在于非默认语言`en.js`单独作为一个`chunk`打包以便能异步加载。 + +下面假设,当应用上线后,客户要求增加`de`语言,但是我们的源码包中并没有包含`de`语言,利用`voerkiai18n`语言加载器功能,可以比较方便地实现动态增加支持语言的功能。 + +### 第一步:注册默认的语言加载器 + + `voerkiai18n`是采用语言加载器来加载语言包的,默认语言包以静态方法打包到源码中,而非默认语言则采用异步加载方式进行加载。 +当注册了一个默认的语言包加载器后,如果切换到一个未注册的语言时,会调用默认的语言包加载器来获取语言包。 +利用此特性就可以实现随时动态为应用增加语言支持的特性。 + +首先需要在应用中导入`i18nScope`实例,然后注册一个默认的语言加载器。 + +```javascript + +// 从当前工程导入`scope`实例 +import { i18nScope } from "./languages" + +// 注册默认的语言加载器 +i18nScope.registerDefaultLoader(async (language,scope)=>{ + // language: 要切换到此语言 + // scope: 语言作用域实例 + // 在此向服务器发起请求,请返回翻译后的其他语言文本 + return {.....} +}) +``` + +### 第二步:编写语言包加载器 + +然后,我们就可以在此向服务器发起异步请求来读取语言包文件。 + +```javascript + +// 从当前工程导入`scope`实例 +import { i18nScope } from "./languages" + +i18nScope.registerDefaultLoader(async (language,scope)=>{ + return await (await fetch(`/languages/${scope.id}/${language}.json`)).json() +}) +``` + +语言加载器函数需要返回JSON格式的语言包,大概如下: +```json +{ + "1":"xxxxx", + "2":"xxxxx", + "3":"xxxxx", + //.... +} +``` + +**重点:为什么要向服务器传递`scope.id`参数?** +在多包环境下,按照多包/库开发的规范,每一个库或包均具有一个**唯一的id**,默认会使用`package.json`中的`name`字段。 + **例如**: +- 应用`A`,依赖于包/库`X`、`Y`、`Z`,并且`A/X/Y/Z`均使用了`voerkiai18n`作为多语言解决方案 +- 当应用启动时,`A/X/Y/Z`均会创建一个`i18nScope`实例,其`id`分别是`A/X/Y/Z`,然后这些`i18nScope`实例会注册到全局的`VoerkaI18n`实例中(详见多库联动介绍)。 +- 假如应用`A`配置支持`zh`、`cn`两种语言,当应用要切换到`de`语言时,那么不仅是`A`应用本身需要切换到`de`语言,所依赖的库也需要切换到`de`语言。但是库`X`、`Y`、`Z`本身可能支持`de`语言,也可以不支持。如果不支持,则同样需要向服务器请求该库的翻译语言。因此,在向服务器请求时就需要带上`scope.id`。 + + +### 第三步:将语言包文件保存在服务器 + +在上一步中,我们通过`fetch(/languages/${scope.id}/${language}.json)`来传递读取语言包(您可以使用任意您喜欢的方式),这意味着我们需要在web服务器上根据此URL来组织语言包,以便可以下载到语言包。比如可以使用如下: +```javascript +webroot + |-- languages + + |-- de.json + + |-- de.json + + |-- de.json + + |-- de.json +``` + +`VoerkaI18n`将编写**如何语言加载器**和**如何在服务器上组织语言包**交由开发者自行决定,您完全可以根据自己的喜好来决定如何加载。 + + +### 第四步:生成语言包文件 + +在本例中,我们要增加`de`语言,这就需要在服务器上生成一个对应的`de`语言包文件。 +方法很简单,打开`languages/cn.js`文件,该文件大概如下: +```javascript +module.exports = { + "1": "支持的语言", + "2": "默认语言", + "3": "激活语言", + "4": "名称空间s", + .... +} +``` +复制一份修改和更名为`de.json`,内容大概概如下: +```javascript +{ + "1": "支持的语言", + "2": "默认语言", + "3": "激活语言", + "4": "名称空间s", + .... +} +``` +然后将`de.json`复制到`languages/chat/de.json`即可。 +同样地,我们也需要对`user`、`manager`、`log`等三个库的语言文件如法泡制,生成语言包文件`languages/user/de.json`,`languages/manager/de.json`,`languages/log/de.json`,这样这三个库也能实现支持`de`语言。 + +### 第五步:编写语言包补丁 + +至此,我们已经实现了可以为应用动态添加语言支持的功能。但是默认语言加载器只是针对的未知的语言起作用,而对内置的语言是不起作用的。也就是说上例中的内置语言`cn`和`en`不能通过此方法来加载。 + +在实际应用中,我们经常会在应用上线的,发现应用中的某此语言翻译错误,此时就可以利用`voerkai18n`的语言包补丁特性来解决此问题。 +利用`voerkai18n`的语言包补丁特性,您就可以随时修复翻译错误,而不需要重新打包应用。 + +`voerkai18n`的语言包补丁特性的工作机制同样也是利用了默认语言加载器来加载语言包补丁。其工作原理很简单,如下: +- 按上例中的方式注册默认语言加载器 +- 当i18nScope注册到全局VoerkaI18n时,会调用默认的语言加载器,从服务器加载语言包,然后合并到本地语言包中,这样就很轻松地实现了动态言包的特性。 + +在本例中,我们假设chat应用的中文语言发现翻译错误,需要一个语言包补丁来修复,方法如下: +```javascript +webroot + |-- languages + + |-- cn.json + +``` +按上例说明的方式,在服务器上编辑一个`cn.json`文件,保存到`languages/char/cn.json`,里面内容只需要包括出错的内容即可。 + +```javascript +{ + "4": "名称空间" +} +``` +然后,当应用切换到指定`cn`语言时,就会下载该语言包合并到源码中的语言包,从而实现为语言包打补丁的功能,修复翻译错误。此功能简单而实用,强烈推荐。 + +### 小结 + + - 当注册了一个默认的语言加载器后,当切换到未配置过的语言时,会调用默认的文本加载器来从服务器加载语言文本。 + - 对于已配置的语言,会在注册时从服务器加载进行合并,从而实现为语言包打补丁的功能。 + - 您需要自己在服务器上组织存放配套的语言包文件,然后编写通过`fetch/axios`等从服务器加载 + + +## 指南 + +### 语言包加载器 + +语言加载器是一个普通`异步函数`或者`返回Promise`的函数,可以用来从远程加载语言包文件。 + +语言加载器时会传入两个参数: +| 参数 | 说明 | +| --- | --- | +| language | 要切换的此语言| +| scope |语言作用域实例,其中`scope.id`值默认等于`package.json`中的`name`字段。详见[参考](../../reference/i18nscope)。 | + +- 典型的语言加载器非常简单,如下: +```javascript +import { i18nScope } from "./languages" +i18nScope.registerDefaultLoader(async (language,scope)=>{ + return await (await fetch(`/languages/${scope.id}/${language}.json`)).json() +}) +``` +- 为什么要应用自己编写语言加载器,而不是提供约定开箱即用? + 主要原因是编写语言加载器很简单,但是如何组织在服务器上的保存,想让应用开发者自行决定。比如,开发者完全可以将语言包保存在数据库中等。 另外考虑安全、兼容性等原因,因此`voerkai18n`就将此交由开发者自行编写。 + + +### 编写语言切换界面 + + 当编写语言切换界面时,对未注册的语言是无法枚举出来的,需要应用自行处理逻辑。例如在Vue应用中 + +```javascript +
+ +
+``` + +还是以本例来说明,上面的Vue应用是无法枚举出来`de`语言的,这就需要应用自己处理,比如: + +```html + +``` +通过编写合适的语言切换界面,您可以在后期随时在线增加语种支持。 + +### 关于语言包补丁 +语言包补丁仅对在`settings.json`配置的语言起作用,而动态增加的语种因为其语言包本身就保存在服务器,因此就不存在补丁的问题。 +语言包补丁会在加载时自动合并到源码中的语言包,并且会自动在本地`localStorage`中缓存。 + diff --git a/docs/zh/guide/intro/get-started.md b/docs/zh/guide/intro/get-started.md index 7796c7a..87b07eb 100644 --- a/docs/zh/guide/intro/get-started.md +++ b/docs/zh/guide/intro/get-started.md @@ -221,3 +221,31 @@ VoerkaI18n.on((newLanguage)=>{ ... }) ``` + +## 第七步:语言包补丁 + +一般情况下,多语言的工程化过程就结束了,`voerkai18n`在多语言实践考虑得更加人性化。有没有经常发现这样的情况,当项目上线后,才发现: +- 翻译有误 +- 客户对某些用语有个人喜好,要求你更改。 +- 临时要增加支持一种语言 + +一般碰到这种情况,只好重新打包构建工程,重新发布,整个过程繁琐而麻烦。 +现在`voerkai18n`针对此问题提供了完美的解决方案,可以通过服务器来为应用打语言包补丁和增加语言支持,而不需要重新打包应用和修改应用。 +方法如下: + +1. 注册一个默认的语言包加载器函数,用来从服务器加载语言包文件 +```javascript +import { i18nScope } from "./languages" + +i18nScope.registerDefaultLoader(async (language,scope)=>{ + return await (await fetch(`/languages/${scope.id}/${language}.json`)).json() +}) +``` + +2. 将语言包补丁文件保存在服务器上指定的位置`/languages/<应用名称>/<语言名称>.json`即可。 +3. 当应用启动后会自动从服务器上加载语言补丁包,从而实现动为语言包打补丁的功能。也可以实现动态增加临时支持一种语言的功能 + +更完整的说明详见[`动态加载语言包`](../advanced/remoteLoad.md)和[`语言包补丁`](../advanced/lngpatch.md)功能介绍。 + + + \ No newline at end of file diff --git a/docs/zh/guide/intro/history.md b/docs/zh/guide/intro/history.md index 29ff8e2..78fc32c 100644 --- a/docs/zh/guide/intro/history.md +++ b/docs/zh/guide/intro/history.md @@ -1,3 +1,9 @@ --- -title: 版本历史 ---- \ No newline at end of file +title: 更新历史 +--- +# 更新历史 + +## 2022/8/5 + +- 增加语言包补丁功能,可以在应用上线后动态更新修复翻译错误 +- 增加动态加载语言包机制,可以在应用上线后动态添加语言支持 \ No newline at end of file diff --git a/docs/zh/guide/intro/readme.md b/docs/zh/guide/intro/readme.md index fb98e2b..41d2da7 100644 --- a/docs/zh/guide/intro/readme.md +++ b/docs/zh/guide/intro/readme.md @@ -2,7 +2,7 @@ 基于`javascript`的国际化方案很多,比较有名的有`fbt`、`i18next`、`react-i18next`、`vue-i18n`、`react-intl`等等,每一种解决方案均有大量的用户。为什么还要再造一个轮子?好吧,再造轮子的理由不外乎不满足于现有方案,总想着现有方案的种种不足之处,然后就撸起袖子想造一个轮子,也不想想自己什么水平。 -哪么到底是对现有解决方案有什么不满?最主要有三点: +那么到底是对现有解决方案有什么不满?最主要有三点: - 大部份均为要翻译的文本信息指定一个`key`,然后在源码文件中使用形如`$t("message.login")`之类的方式,然后在翻译时将之转换成最终的文本信息。此方式最大的问题是,在源码中必须人为地指定每一个`key`,在中文语境中,想为每一句中文均配套想一句符合语义的`英文key`是比较麻烦的,也很不直观不符合直觉。我希望在源文件中就直接使用中文,如`t("中华人民共和国万岁")`,然后国际化框架应该能自动处理后续的一系列麻烦。 @@ -32,7 +32,7 @@ - 翻译过程内,提取文本可以自动进行同步,并保留已翻译的内容。 -- 可以随时添加支持的语言 +- 支持远程加载语言包,并且可以在线打语言补丁包 - 支持调用在线自动翻译对提取文本进行翻译。 diff --git a/docs/zh/guide/intro/support.md b/docs/zh/guide/intro/support.md new file mode 100644 index 0000000..c097721 --- /dev/null +++ b/docs/zh/guide/intro/support.md @@ -0,0 +1,4 @@ +# 获取支持 + +- 通过Gitgee或Github提交[issues](https://github.com/zhangfisher/voerka-i18n/issues) +- 国内用户可以加[QQ群](https://qm.qq.com/cgi-bin/qm/qr?k=jKyZR9KupT9Ith5ZsulB-i04OaJDkCwe&jump_from=webapi). diff --git a/docs/zh/guide/intro/versions.md b/docs/zh/guide/intro/versions.md new file mode 100644 index 0000000..d361f7d --- /dev/null +++ b/docs/zh/guide/intro/versions.md @@ -0,0 +1,11 @@ +# 版本信息 +| 包| 版本号| 最后更新|说明| +| --- | :---:| --- |---| +|**@voerkai18n/utils**|1.0.12|08/05|公共工具库 +|**@voerkai18n/runtime**|1.0.27|08/05|核心运行时 +|**@voerkai18n/formatters**|1.0.6|04/15|格式化器,提供对要翻译文本的转换功能 +|**@voerkai18n/react**|1.0.4|04/16|React支持,提供语言切换等功能 +|**@voerkai18n/cli**|1.0.32|08/05|命令行工具,用来初始化/提取/编译/自动翻译等工具链 +|**@voerkai18n/babel**|1.0.23|08/05|Babel插件,实现自动导入t函数和自动文本映射 +|**@voerkai18n/vite**|1.0.12|08/05|Vite插件,提供自动插入翻译函数和文本映射等功能 +|**@voerkai18n/vue**|1.0.5|04/15|Vue3插件,提供自动插件翻译函数和语言切换功能 \ No newline at end of file diff --git a/docs/zh/home.md b/docs/zh/home.md index 2e80b1d..594fb33 100644 --- a/docs/zh/home.md +++ b/docs/zh/home.md @@ -9,18 +9,18 @@ actions: - text: 快速入门 link: /guide/intro/get-started - - text: 源码 - link: / + - text: 安装 + link: /guide/intro/install type: secondary features: - - title: 工程化支持 + - title: 工程化支持1 icon: markdown details: 从文本提取/自动翻译/编译/动态切换的全流程工程化支持,适用于大型项目 link: - title: 集成自动翻译 - icon: slides + icon: tab details: 调用在线翻译服务API支持对提取的文本进行自动翻译,大幅度提高工程效率 link: @@ -44,18 +44,39 @@ features: details: 支持monorepo工程下多库进行语言切换的联动机制 link: - - title: 自动扩展工具 + - title: 工具链 icon: palette - details: 提供Vue/React/Babel等扩展插件,简化各种应用下 + details: 提供Vue/React/Babel等扩展插件,简化各种应用开发 link: - - title: 扩展特性 + - title: 插值变量 icon: contrast - details: 强大的插值变量机制,能扩展支持复数、日期、货币等灵活强大的多语言机制 + details: 强大的插值变量机制,能扩展支持复数、日期、货币等灵活强大的多语言特性 link: + - title: 语言补丁 + icon: info + details: 在应用上线后发现错误时可以在线修复 + link: + + - title: 动态语种 + icon: blog + details: 可以在应用上线上动态增加语种支持 + link: + + - title: 扩展在线编辑 + icon: palette + details: 很容易扩展支持在线语言包编辑 + link: + + - title: 复数支持 + icon: contrast + details: 灵活而强大的复数机制 + link: + copyright: true footer: MIT Licensed | Copyright © 2022-present wxzhang + --- \ No newline at end of file diff --git a/docs/zh/reference/lang-code.md b/docs/zh/reference/lang-code.md index d280e98..81daa95 100644 --- a/docs/zh/reference/lang-code.md +++ b/docs/zh/reference/lang-code.md @@ -1,3 +1,35 @@ # 语言代码 -请参阅[这里](https://fanyi-api.baidu.com/doc/21) \ No newline at end of file +常见的语言代码如下: + +| 名称 | 代码 | +|---|:---:| +|中文| zh | +|繁体中文| cht | +|英语 |en| +|日语 |jp| +|韩语 |kor | +|法语 |fra | +|西班牙语| spa| +|泰语 |th | +|阿拉伯语| ara | +|俄语| ru| +|葡萄牙语 |pt | +|德语 |de | +|意大利语| it| +|希腊语 |el | +|荷兰语 |nl | +|波兰语 |pl| +|保加利亚语 |bul | +|爱沙尼亚语 |est | +|丹麦语 |dan| +|芬兰语 |fin | +|捷克语 |cs | +|罗马尼亚语 |rom| +|斯洛文尼亚语| slo | +|瑞典语 |swe | +|匈牙利语 |hu| +|越南语 |vie | + + +更完整的请参阅[这里](https://fanyi-api.baidu.com/doc/21) \ No newline at end of file diff --git a/packages/apps/vueapp/public/languages/vueapp/de.json b/packages/apps/vueapp/public/languages/vueapp/de.json new file mode 100644 index 0000000..2775ea9 --- /dev/null +++ b/packages/apps/vueapp/public/languages/vueapp/de.json @@ -0,0 +1,8 @@ +{ + "1": "DE: Hello world!", + "2": "DE: 中华人民共和国", + "3": "DE: 迎接中华民族的伟大复兴", + "4": "DE: 成立于{}年", + "5": "DE: 首都:北京", + "6": "DE: VoerkaI18n多语言解决方案 " +} \ No newline at end of file diff --git a/packages/apps/vueapp/public/languages/vueapp/en.json b/packages/apps/vueapp/public/languages/vueapp/en.json new file mode 100644 index 0000000..9c0e97e --- /dev/null +++ b/packages/apps/vueapp/public/languages/vueapp/en.json @@ -0,0 +1,3 @@ +{ + "2": "The People's Republic of China!!!" +} \ No newline at end of file diff --git a/packages/apps/vueapp/public/languages/vueapp/zh.json b/packages/apps/vueapp/public/languages/vueapp/zh.json new file mode 100644 index 0000000..4b1e1f1 --- /dev/null +++ b/packages/apps/vueapp/public/languages/vueapp/zh.json @@ -0,0 +1,4 @@ +{ + "3": "全世界迎接中华民族的伟大复兴!" + +} \ No newline at end of file diff --git a/packages/apps/vueapp/src/App.vue b/packages/apps/vueapp/src/App.vue index 5398fc3..7be96b7 100644 --- a/packages/apps/vueapp/src/App.vue +++ b/packages/apps/vueapp/src/App.vue @@ -46,8 +46,11 @@ export default {
默认语言:{{ i18n.defaultLanguage }}
当前语言:{{ i18n.activeLanguage.value }}
+ + +