UI localization

Standard UI

Follow these simple steps to submit a translation for the CLI UI in another language!

1. Run navigator.languages or navigator.language to get language code for the new region. For example: 'fr'.
2. Search npm to confirm that a package named vue-cli-locale-lt;language code-gt; I f so, contribute to it through PR! I f you don't find it, create a new package for the region named vue-cli-locale-lt; Example: vue-cli-locale-fr.
3. Place the region's JSON file in a locales folder and name it the language code. For example: locales/fr.json.
4. In the package.json file, set the unpkg field as the path to the area file. For example: "unpkg": "./locales/fr.json".
5. Publish the package to npm.

You can refer to the English regional documents here.

As an example, refer to a package in French.

Translate plug-ins

You can also place regional files compatible with vue-i18n in the locales folder of the root of the plug-in. D oing so automatically loads when the project opens, and then you can use $t to translate strings in your components and vue-i18n auxiliary functions. Strings used by the same UI API (like describeTask) will go into vue-i18n so you can localize them.

Example Locales folder:

vue-cli-plugin/locales/en.json
vue-cli-plugin/locales/fr.json

Examples of API usage:

api.describeConfig({
  // vue-i18n 路径
  description: 'com.my-name.my-plugin.config.foo'
})

Dangerous

Make sure you set the correct namespace for id because it needs to be unique across all plug-ins. We recommend using reverse domain name notation.

Examples used in components:

<VueButton>{{ $t('com.my-name.my-plugin.actions.bar') }}</VueButton>

If you prefer, you can use ClientAddonApi to load regional files in one client addon:

// 加载本地文件 (使用 vue-i18n)
const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
locales.keys().forEach(key => {
  const locale = key.match(/([a-z0-9]+)\./i)[1]
  ClientAddonApi.addLocalization(locale, locales(key))
})