前言

新公司前端代码是vben-admin-vue，使用了多语言，vscode 也安装了i18n ally插件，但是开发时候，开发页面并没有显示我所预期的翻译。

查看VSCode的配置文件settings.json

查看VSCode的settings.json文件，是否有i18n-ally.localesPaths配置；

    "i18n-ally.localesPaths": [
        "src/locales/lang", 
        "public/resource/tinymce/langs"
    ], 

是有配置多语言解析目录i18n-ally.localesPaths配置

查看多语言文件格式是否是默认的json文件

我又查看了项目多语言文件夹 发现公司的多语言是使用的ts格式编写的，并不是之前的json格式。

配置i18n ally需要解析的文件格式

首先需要了解支持的语言环境格式 传送门

我的文件格式是ts格式

还有一部分插件用的是js格式的，所以我这里把ts js都配置了。

  "i18n-ally.localesPaths": ["src/locales/lang", "public/resource/tinymce/langs"], 
  "i18n-ally.enabledParsers": ["ts", "js", "json"], 

到这里还是没有，但是可以看到i18n的解析树是解析出来文件了。

查看解析出来的多语言文件

发现这种格式是直接用的，例如

    import en from "./en/user"; 
    import zh from "./zh-CN/user"; 
    export default { 
        en: { 
            user: en // 添加对应的key 
        }, 
        "zh-CN": {
            user: zh 
        }, 
    };
    

解析出来是要这样使用：

    // 解析出来是要这样使用
    <div> 
        <span>{{ t('name') }}:</span>
        <span>皮卡丘</span> 
    </div>

我需要的是这样显示的：

    
    // 我需要的
    <div> 
        <span>{{ t('user.name') }}:</span> 
        <span>皮卡丘</span> 
    </div>

因为我的目录结构是嵌套的

这肯定是不行的，开始查找文档，最终发现是要配置i18n-ally.pathMatcher来实现。

{
  "i18n-ally.localesPaths": ["src/locales/lang", "public/resource/tinymce/langs"], // 多语言路径
  "i18n-ally.enabledParsers": ["ts", "js", "json"], // 解析语言
   "i18n-ally.namespace": true, // 开启命名空间
  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}", // 路径匹配解构
  
}

这下查看解析是正确的嵌套格式了

这下查看页面是显示了，但显示的是英文，所以需要设置一下显示语言i18n-ally.displayLanguage设置成zh-CN就可以了。

总结

我最终的配置是：

{
  "i18n-ally.localesPaths": ["src/locales/lang", "public/resource/tinymce/langs"], // 多语言路径
  "i18n-ally.keystyle": "nested", // 翻译路径格式
  "i18n-ally.sortKeys": true, // 排序
  "i18n-ally.namespace": true, // 开启命名空间
  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}", // 路径匹配解构
  "i18n-ally.enabledParsers": ["ts", "js", "json"], // 解析语言
  "i18n-ally.sourceLanguage": "en", // 翻译源语言
  "i18n-ally.displayLanguage": "zh-CN", // 界面显示语言
}

希望可以帮到大家。

提示

通过度娘之道了,使用 Ctrl+Shift+U 打开 “输出” 面板，在右侧下拉选择到 i18n Ally，就能看到插件的日志信息，可以看看是什么原因导致的分析失败，针对性地去调整国际化文件了，不需要像我如此盲目了。