vue-autoI18n 插件说明

⚠️ 当前为测试版，功能持续完善中，欢迎反馈建议！ 📬 如发现问题或有建议，欢迎前往 Gitee Issues 反馈。

🚀 功能亮点

• 一键自动国际化：支持 Vue、JavaScript、TypeScript 文件，自动识别并提取中文文本。
• 右键菜单集成：在编辑器中右键即可选择“自动国际化”，无需命令行操作。
• 智能 key 生成：国际化 key 采用 文件夹名.中文内容 规则，结构清晰易维护。
• 属性值自动处理：如 range-separator 等属性，中文值自动加冒号前缀，兼容 Vue 语法。
• JS 代码智能替换：JS/TS 代码中的中文自动转换为 $t('key') 格式，避免语法错误。
• 资源文件自动管理：所有国际化内容统一写入 src/locales/models 目录，按文件名分模块管理，支持增量写入，避免覆盖已有翻译。
• 脚手架集成：插件自动初始化项目结构，生成必要目录和配置文件。
• 配置自动读取：自动读取 .langrc 文件中的 appid、secretkey、localeDir，便于后续扩展翻译 API。

📁 生成目录结构示例

项目根目录/
├── .langrc                # 国际化配置文件
├── src/
│   └── locales/
│       ├── index.js        # i18n主文件
│       └── models          # 存放生成的字典文件的目录
│           └── demo.js     # 生成的字典文件示例
│           └── xx.js       # 使用自动国际化生成的字典文件
├── package.json
└── ...

🛠️ 使用方法

1. 安装 vue-autoI18n 插件。

2. 打开需要国际化的 Vue/JS/TS 文件。

3. 右键选择“构建初始化目录”，插件自动初始化项目结构。

4. 右键选择“自动国际化”，插件自动扫描并处理文件内容。

5. 国际化 key 会自动写入 src/locales/models/[文件名].js，支持增量更新。

6. 首次使用会自动创建 src/locales 目录及相关依赖。

7. 支持 .langrc 配置，自动读取 appid、secretkey、localeDir。

   • appid：百度翻译 API 应用 ID
   • secretkey：百度翻译 API 密钥
   • localeDir：国际化资源文件目录，默认 src/locales/models

8. 推荐使用unplugin-auto-import插件自动导入$t函数。

   • 安装插件：npm install unplugin-auto-import --save-dev
   • 配置插件：在 vite.config.js 中添加以下代码

   import AutoImport from "unplugin-auto-import/vite";
   
   export default defineConfig({
     plugins: [
       AutoImport({
         imports: [
           {
             "@/i18n": ["$t"],
           },
         ],
       }),
     ],
   });
   

⚠️ 注意事项

• 当前仅支持 Vue3 Setup 语法，未来将支持 JS/TS/Vue2 文件国际化。
• 国际化资源文件统一写入 src/locales 目录，自动创建目录并按文件名分模块管理。
• 插件支持增量写入，团队协作更安全。
• 若需自定义目录结构，请修改 localeDir 字段。
• 当前插件为测试版，功能持续完善中，欢迎反馈建议。

✨ 更新日志

✨ v0.0.1

• 插件发布，支持 Vue/JS/TS 文件一键自动国际化
• 自动生成 src/locales 目录及资源文件
• 支持 .langrc 配置自动读取
• 集成脚手架功能，项目结构一键初始化
• 右键菜单支持“自动国际化”命令
• 右键菜单支持“构建初始化目录”命令

✨ v0.0.2

• 更改描述文档，完善功能说明

📄 License

MIT