1、改造目的：使商城支持多语言展示，方便后续日区商城的开发
2、技术调研：i18n作为市面上惯用的国际化处理技术，商城项目采用vue-i18n ( 介绍 | Vue I18n )
3、语言环境设置 ( nuxt框架 — 静态资源/Element/Vant )：
| import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 引入Element语言包
import jaLocale from 'element-ui/lib/locale/lang/ja'
import enLocale from 'element-ui/lib/locale/lang/en'
import ElementLocale from 'element-ui/lib/locale'
// vant语言包
import vantLocale from '../locales/vant.js'
Vue.use(VueI18n)
export default ({ app, store }) => {
const locale = store.state.locale
app.i18n = new VueI18n({
locale, // 设置语言环境,变量放在Vuex中
fallbackLocale: 'en-US', // default English
messages: { // 配置本地语言包
'en-US': { ...require('@/locales/en-US.json'), ...enLocale },
'ja-JP': { ...require('@/locales/ja-JP.json'), ...jaLocale }
}
})
// app.i18n.path = (link) => {
// // ignore default
// if (app.i18n.locale === app.i18n.fallbackLocale) {
// return `/${link}`
// }
// return `/${link}?lang=/${app.i18n.locale}`
// }
// element国际化
ElementLocale.i18n((key, value) => app.i18n.t(key, value))
// vant国际化
vantLocale(locale)
}
|
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)
}
plugins: [
'~/plugins/i18n.js'
],
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
中文
繁体
英文
备注：具体实施方案根据项目具体情况而定