Similar to the backend i18n, EggBornJS also implements the frontend i18n at the module level

  1. Module can specify its own i18n
  2. The i18n at project level can override the one at module level

Definition of Language Resources

The default language for EggBornJS is en-us. If support Chinese, you need to add zh-cn resource file

src/suite-vendor/test-party/modules/test-party/front/src/config/locale/zh-cn.js

export default {
  ...
  'Hello World': '世界,您好',
  ...
};

Usage of Language Resources

EggBornJS uses the method $text to dynamically get the specified language resources according to the locale configuration of the client

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/guide.vue

onPerformClick5() {
  const params = {
    message: this.$text('Hello World'),
    markCount: this.$config.markCount,
  };
  return this.$api.post('kitchen-sink/guide/echo4', params).then(data => {
    this.message4 = data;
  });
},

How to change the locale configuration of the client?

  • Open the home page, entry Mine->Info,update the field of Locale, and save, then refresh the page

Override Language Resources

Use project level language resources to override module level language resources, thereby changing 世界,您好 to 您好,世界

src/front/config/locale/zh-cn.js

export default {
  'Hello World': '您好,世界',
};