本插件用于 Vue 项目添加国际化支援辅助开发之用。可以快速为项目添加国际化支援,同时提供了国际化的翻译功能。
- 识别 Vue 文件中的中文文本;
- 自动生成 key;
- 生成翻译文件;
- 导出翻译结果;
- 打开 Vue 文件,点击右上角的自动识别中文:
- 稍等片刻,待其识别完成后,会打开编辑界面:
- 确认 Vue 文件是否还有遗漏的需翻译的中文字符串。如果有,则选中后点击浮窗的
添加到国际化
:
- 对于不需要翻译的位置,鼠标移动到翻译项位置,点击出现的
移除翻译位置
即可:
- 添加完成后,点击
国际化 Key
后的按钮自动生成
。自动生成国际化 Key:
- 点击操作的删除按钮可以删除国际化项目,跳转按钮可以跳转到国际化的行。
- 最后,点击
导出
按钮,弹出的文件夹选择框选择导出的目的地。确定后就会开始导出,同时会将国际化 Key 使用$t('key')
插入到代码中,只要再在代码中加入实现或导入$t
函数即可。
插件的配置项如下:
front-i18n.appId
: 百度翻译接口 appId,若不设置则无法自动生成 Key 与自动翻译导出结果。申请方法见百度翻译文档front-i18n.appKey
: 百度翻译接口 API Key,若不设置则无法自动生成 Key 与自动翻译导出结果。申请方法见百度翻译文档front-i18n.i18nFunctionName
: 插入到代码的 i18n 函数名,默认为$t
。front-i18n.autoTranslateResult
: 是否自动翻译导出结果,默认为false
。front-i18n.exportLanguageExcel
:是否导出翻译结果 Excel,默认为false
。front-i18n.languages
: 导出的语言列表,支援的语言列表见百度翻译文档。默认为['en']
。
若有更新维护,需要调试代码,可以按照以下步骤进行:
- 安装依赖:
npm install
- 终端执行
npm run dev
- 按下
F5
即可调试。
extension 的代码可以直接下断点调试。
Webview 代码则在启动的 扩展开发宿主
按下 Ctrl + Shift + I
启动开发者工具调试。
启动开发者工具后,可按下 Ctrl + Shift + C
选择要调试的Webview。然后切换到 Console
选项卡,查看 Webview 的 id:
然后切换到 Source
选项卡。在左侧的文件列表中该 id 目录,展开找到 localhost:5173
即可对 Webview 代码下断点调试。
- 新增追加到文件功能;
- 修正若干识别与替换 bug;
- 初版发布。