与后端i18n类似，EggBornJS也实现了前端模块级别的国际化特性

  1. 模块可以单独提供自己的国际化语言资源
  2. 项目级别的国际化可以覆盖模块级别的国际化

定义语言资源

EggBornJS默认语言是en-us，如果需要支持中文，就需要添加zh-cn资源文件

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

  1. 1export default {
  2. 2  ...
  3. 3  'Hello World': '世界，您好',
  4. 4  ...
  5. 5};

使用语言资源

EggBornJS通过方法this.$text根据客户端的locale配置动态使用相应的语言资源

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

  1. 1onPerformClick5() {
  2. 2  const params = {
  3. 3    message: this.$text('Hello World'),
  4. 4    markCount: this.$config.markCount,
  5. 5  };
  6. 6  return this.$api.post('kitchen-sink/guide/echo4', params).then(data => {
  7. 7    this.message4 = data;
  8. 8  });
  9. 9},

如何修改客户端的locale配置?

  • 打开首页，依次进入我的->设置->外观，切换语言，然后刷新页面即可

覆盖语言资源

使用项目级别的语言资源覆盖模块级别的语言资源，从而将世界，您好改为您好，世界

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

  1. 1export default {
  2. 2  'Hello World': '您好，世界',
  3. 3};