Vue Projects: File Format Matters

[tieniu1]

Recently, I encountered some problems while using i18n-ally for internationalization in Vue projects. I'm sharing my experience here, hoping it might help other developers facing similar issues.

Problems Encountered

1. In a Vue 2 project created with Vue CLI, language files (src/lang/zh.js and en.js) loaded normally.
2. In a Vue 3 project created with Vite, language files failed to load with the same configuration.
3. The problem was resolved after changing the language files to JSON format.
4. In VSCode, i18n variables don't display their actual values.
5. Using Chinese as i18n keys in the Vue 2 project led to more issues.

Key Finding

Strongly recommend using JSON format for language files. This can avoid many potential loading problems.
Current i18n-ally Configuration

"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.keystyle": "nested",
"i18n-ally.enabledFrameworks": ["vue"],
"i18n-ally.enabledParsers": ["js", "json"],
"i18n-ally.localesPaths": [
  "src/i18n/lang",
],

Use JSON format for language files.

1. Avoid using Chinese as i18n keys; use English or other easily identifiable identifiers instead.
2. Be aware of potential configuration differences between Vue 2 and Vue 3 projects.
3. If anyone has encountered similar issues or has better solutions, please feel free to share.