在 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'
];
