小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

这里主要讲解前后端分离的 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)
  })
}

之后怎么在业务代码中获取传入的国家配置，我们直接进入下一节 “文案国际化”，功能裁剪这块也在下一节继续展开。

前端如何做国际化(中)

前端如何做国际化(下)

连载阅读体验更佳

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期精彩推荐

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

面试相关推荐

更多精彩详见：个人主页

前端如何做国际化(上)

一、工程项目国际化

功能裁剪定制

往期精彩推荐