[JavaScript知识库] 商城多语言改造方案

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 商城多语言改造方案 -> 正文阅读

[JavaScript知识库]商城多语言改造方案

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

若页面操作上无需切换语言环境，则可将环境变量配置在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
vesync
中文：Vesync.com
繁体：Vesync.com
英文：Vesync.com