在 Egg + Vue SSR 方案中,可以使用 vue-i18n 实现国际化支持, 使用前请先阅读以下文档:

Egg + Vue 实现国际化

安装依赖

npm install vue-i18n --save

编写 cn 和 en 语言文件

  • 中文配置:egg-vue-webpack-boilerplate/app/web/framework/i18n/cn.js
export default {
  menu: {
    server: '服务端渲染',
    client: '前端渲染',
    dynamic: '动态渲染',
    element: 'Element',
    single: '单页面',
  },
  lang: {
    href: '/?locale=en',
    text: '切换英文版'
  }
};
  • 英文配置:egg-vue-webpack-boilerplate/app/web/framework/i18n/en.js
export default {
  menu: {
    server: 'Server',
    client: 'Client',
    dynamic: 'Dynamic',
    element: 'Element',
    single: 'SPA',
  },
  lang: {
    href: '/?locale=cn',
    text: 'Switch Chinese'
  }
};
  • 编写 i18n 入口文件:egg-vue-webpack-boilerplate/app/web/framework/i18n/index.js
import VueI18n from 'vue-i18n';
import cn from './cn';
import en from './en';
export default function createI18n(locale) {
  return new VueI18n({
    locale,
    messages: {
      en,
      cn
    }
  });
}

页面注册

export default function render(options) {
  return context => {
    // locale 是从 Node 端传递过来的配置参数,用于加载指定语言文件
    const i18n = createI18n(context.state.locale);
    const VueApp = Vue.extend(options);
    const app = new VueApp({ data: context.state, i18n });
    return new Promise(resolve => {
      resolve(app);
    });
  };
}
new Vue({ i18n }).$mount('#app')

Egg 中间件统一处理

  • 编写中间件,从 url 获取切换语言标记 locale,然后设置给 ctx.locals (egg-view-vue-ssr 渲染时,会统一合并 locals)
//${root}/app/middleware/locals.js
module.exports = () => {
  return async function locale(ctx, next) {
    ctx.locals.locale = ctx.query.locale || 'cn';
    await next();
  };
};
  • 开启locals中间件
//${root}/config/config.default.js
exports.middleware = [
   'locals'
];

相关资料


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
HTML前端渲染 HTML前端渲染
背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 React 的前端渲染模式,但都依赖 egg-view-react-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...
2019-12-23 sky
Next 
工程介绍 工程介绍
Egg Vue 工程解决方案特性支持Node 端基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制。使用 TypeScript 或 JavaScript 编写前端和Node端代码,支持 ts-node 无编译 和 Webpack 编译开...
2019-12-23 sky