商城多语言改造方案

1、改造目的：使商城支持多语言展示，方便后续日区商城的开发

2、技术调研：i18n作为市面上惯用的国际化处理技术，商城项目采用vue-i18n ( 介绍 | Vue I18n )

3、语言环境设置 ( nuxt框架  —  静态资源/Element/Vant )：

• 插件的实现（plugins/i18n.js） 

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)
}

• 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插件、及自定义文案的国际化实现，具体的实现方案则需根据产品具体需求而定；

1. 若页面操作上无需切换语言环境，则可将环境变量配置在config中，具体取值在OPS中配置;
   运维和后台接口通过环境变量区分语言环境，页面代码中无需改变语言环境变量，此为商城国际化最简单的实现方式；
    
2. 若需要在页面上支持语言环境变化；可通过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
   
   中文
   繁体
   英文

备注：具体实施方案根据项目具体情况而定