小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
这里主要讲解前后端分离的 vue 单页面应用怎么做国际化。
连载阅读体验更佳
一、工程项目国际化
工程的国际化主要分成2部分:1、功能裁剪定制;2、文案国际化。
这篇主要讲:功能裁剪定制
文案国际化就是将页面中的文案做成可以切换语言,然后用对应语言的文案进行展示,主要是在工程中维护多份语言包(key-value),通过同一个key获取不同语言下对应的 value。
功能裁剪定制,则是不同国家对于功能的需求不一样,一般都只要国内系统的部分功能;至于定制,则是部分展示或者交互要改成适合某个国家的需求,对于前端来说,一般不做过多的定制需求,不然代码后续难维护,而且占用国内研发资源,当出现过多的定制需求时,建议由对应国家的本土化研发团队承接前端的开发。
功能裁剪定制
功能裁剪比如:头部要哪几个菜单项、不要某些路由、手机号验证添加国家区号、某些内容区别展示等。
要做到上面的区别,我们需要知道当前开发或者打包构建时是要运行哪个国家的逻辑,也就是我们要能在代码中知道当前是哪个国家。
在这里,通过 webpack 配置项 plugins ,用 webpack.DefinePlugin 插件向业务代码中传入当前的环境变量(该插件用于传入环境变量)。
首先,我们需要有一份不同国家的配置项。
国家的配置中,我们需要传入当前是哪个国家,以及它的个性化配置(用于功能裁剪等)。
我们在根目录下创建 locale 文件夹,专门用来配置国际化的不同国家的配置,目录结构如下:
├── locale
│ ├── China.js 中国站配置
│ ├── index.js 入口,也即暴露出去的配置
│ ├── Thailand.js 泰国站配置
index.js 文件内容:
const China = require('./China')
const Thailand = require('./Thailand')
const config = {
China,
Thailand
}
const currentDistrict = process.env.DISTRICT || 'China'
module.exports = {
name: currentDistrict, // 当前国家标志符
config: config[currentDistrict] || config['China'] // 当前国家的配置项
}
index.js
直接从环境变量获取当前执行的是哪个国家的环境,比如当前执行的是 China,则对外暴露出中国站的配置。
而环境变量,我们可以通过 package.json 传入,如:
"scripts": {
"dev": "****", // 工程的dev运行
"build": "****", // 工程的打包
"dev:th": "cross-env DISTRICT=Thailand npm run dev",
"build:th": "cross-env DISTRICT=Thailand npm run build"
}
上面则配置了一条泰国站的本地运行和泰国站的构建打包,这样就可以在 node 代码(package执行的就是node代码)中通过 process.env.DISTRICT
获取到环境变量中的国家。
至于 China.js 和 Thailand.js 的内容就是一个对象配置,key 和 结构一致,除了 value 不一样。
China.js
module.exports = {
languages: ['zh_CN', 'en_US'],
cookieDomain: 'jd.com', // language 语言字段写入cookie的域名
passport: 'https://passport.shop.jd.com/login/index.action?ReturnUrl=',
stream: {
siteId: 'JA2018_1131074',
domain: 'jd.com'
}, // 子午线站点
urls: {
openUrl: 'open.jd.com',
jdUrl: 'jd.com'
...
},
functional: {
openLayout: true, // 头部是否展示开放版图
vapp: true, // 头部是否展示小程序
...
}
上面配置的基本是一个国际化项目需要修改的针对国家的不同配置:
- languages 配置当前国家支持什么语言,也有项目是通过后端接口获取,但这样会导致需要先等后端接口返回,然后再呈现内容,这样的串行会导致页面呈现出来较慢
- cookieDomain 当用户切换界面上的语言切换开关时,我们需要将要切换的语言写入cookie,那么就需要知道是写入哪个域名
- passport 登录要跳转的地址
- stream 子午线配置
- urls 外链等
- functional 功能裁剪配置,根据自己要裁剪什么功能进行配置 之后,我们需要将这份配置通过webpack传入到业务代码中的环境变量。
这里环境变量有2个,1个是系统环境变量,传入到 node 代码中的,另一个是业务的环境变量,通过webpack传入到业务代码的,两个不是通用的。也就是业务代码中不能直接获取package传入的环境变量,必须由 node 代码拿到后通过 webpack 传入。
webpack 配置如下:
const webpack = require('webpack')
plugins: {
new webpack.DefinePlugin({
'process.env.DISTRICT': JSON.stringify(xx国家的配置xx)
})
}
之后怎么在业务代码中获取传入的国家配置,我们直接进入下一节 “文案国际化”,功能裁剪这块也在下一节继续展开。
连载阅读体验更佳
点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。
往期精彩推荐
Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM
Git 相关推荐
面试相关推荐
更多精彩详见:个人主页