1、改造目的:使商城支持多语言展示,方便后续日区商城的开发
2、技术调研:i18n作为市面上惯用的国际化处理技术,商城项目采用vue-i18n ( 介绍 | Vue I18n )
3、语言环境设置 ( nuxt框架 — 静态资源/Element/Vant ):
- 插件的实现(plugins/i18n.js)
|
- 语言包的创建
locales/en-US.json(英语)
{ "menu": { "home": "EnHome" } }
locales/en-JP.json(日语)
{ "menu": { "home": "日本Home" } }
locales/vant.js(Vant)
import { Locale } from 'vant' import enUS from 'vant/es/locale/lang/en-US' import jaJP from 'vant/es/locale/lang/ja-JP' export default function (locale) { let localName = enUS if (locale === 'ja-JP') { localName = jaJP } Locale.use(locale, localName) }
- nuxt.config.js中注册插件
plugins: [
'~/plugins/i18n.js'
],
build: {
vendor: ['element-ui', 'vue-i18n'], // 在自动生成的 vendor.bundle.js
文件中添加一些模块,以减少应用 bundle 的体积
transpile: [/vant.*?less/, 'vant/es/locale/lang/en-US', 'vant/es/locale/lang/ja-JP'] //使用 Babel 与特定的依赖关系进行转换
}
- 代码中使用
{{ $t('menu.home') }}
- 语言包切换
// import vantLocale from '~/locales/vant'
this.$i18n.locale = val
this.$store.commit('SET_LANG', val) // 可将环境变量设置在vuex中
// vantLocale(val)
4、具体方案实施
上述内容涉及到的国际化改造点为Element和Vant插件、及自定义文案的国际化实现,具体的实现方案则需根据产品具体需求而定;
- 若页面操作上无需切换语言环境,则可将环境变量配置在config中,具体取值在OPS中配置;
运维和后台接口通过环境变量区分语言环境,页面代码中无需改变语言环境变量,此为商城国际化最简单的实现方式;
- 若需要在页面上支持语言环境变化;可通过url参数配置或者cookie值来获取语言环境,一般是通过url来实现;
当环境变量切换时,可以通过改变url中的变量值,或者通过cookie值的改变来通知后台接口切换为相应的语言环境;
前端这边则可以通过中间件来处理语言环境值的变化;
建议使用url来控制语言环境的变化,具体url可参考ELement官网或公司官网,如:
Element
中文:Element - The world's most popular Vue UI framework
英文:Element - The world's most popular Vue UI framework
中文
繁体
英文
备注:具体实施方案根据项目具体情况而定