前端的国际化部署方案

前端的部署目前分为2种类型，1种是跟随后端项目部署在 tomcat 服务器上，1种是前端单独部署，可能布在 node 或者 nginx 上。

但如果按照本地构建后部署和在线构建部署来划分，其实应该分为构建后的 git 项目部署，和用源工程在线部署。

区别就在于前者是将构建后的文件放在了git工程中，后者是源代码，构建后的文件只在部署时才产生。

本地构建后部署

国际化对此的区别就是要一份git代码部署在多个地区，构建后的文件如果不同地区都放在同1个路径下，就会导致我们每次部署不同国家时都得重新构建，不仅操作繁琐而且容易导致上线时不同国家的文件不对应的问题。

为了避免每部署1个就得重新构建1个当前国家的代码然后放上去，我们需要将不同地区的打包后的文件放在1个git中的不同路径下，这样才能避免我们每次都得重新打包覆盖的问题，也能规避上线时不同国家的文件不对应的问题。

比如后端工程中中国站代码和泰国站代码分别放于 webapp/China/index.html 和 webapp/Thailand/index.html 中；nginx工程也类似。

因为放置的路径不一样，为了中国站和泰国站的系统访问地址除了域名不一致其他路径一致，可以通过配置后端路由或者nginx路由来根据不同地区返回不同的前端文件。

打包时不同地区输出不同文件夹

这个在 vue-cli 2中修改 config/index.js 中 build 的 assetsRoot ，在 vue-cli 4 中修改 vue.config.js 的 outputDir，通过环境变量获取当前时哪个地区，对应构建时生成该地区的文件，如打包后中国站是 dist/china 文件夹。

在线构建部署

对于这种方式，则只需要在构建编译的时候执行不同地区的打包命令，然后部署即可。

附录

js-cookie.js（也可以使用其他cookie包）

/* 原本js-cookies不支持es6语法，单独拿出来做兼容
 *!
 * JavaScript Cookie v2.2.0
 * https://github.com/js-cookie/js-cookie
 *
 * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
 * Released under the MIT license
 */
/* eslint-disable */
function extend () {
  var i = 0
  var result = {}
  for (; i < arguments.length; i++) {
    var attributes = arguments[i]
    for (var key in attributes) {
      result[key] = attributes[key]
    }
  }
  return result
}
 
function decode (s) {
  return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent)
}
 
function init (converter) {
  function api () {}
 
  function set (key, value, attributes) {
    if (typeof document === 'undefined') {
      return
    }
 
    attributes = extend({
      path: '/'
    }, api.defaults, attributes)
 
    if (typeof attributes.expires === 'number') {
      attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5)
    }
 
    // We're using "expires" because "max-age" is not supported by IE
    attributes.expires = attributes.expires ? attributes.expires.toUTCString() : ''
 
    try {
      var result = JSON.stringify(value)
      if (/^[{[]/.test(result)) {
        value = result
      }
    } catch (e) {}
 
    value = converter.write
      ? converter.write(value, key)
      : encodeURIComponent(String(value))
        .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent)
 
    key = encodeURIComponent(String(key))
      .replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
      .replace(/[()]/g, escape)
 
    var stringifiedAttributes = ''
    for (var attributeName in attributes) {
      if (!attributes[attributeName]) {
        continue
      }
      stringifiedAttributes += '; ' + attributeName
      if (attributes[attributeName] === true) {
        continue
      }
 
      // Considers RFC 6265 section 5.2:
      // ...
      // 3.  If the remaining unparsed-attributes contains a %x3B (";")
      //     character:
      // Consume the characters of the unparsed-attributes up to,
      // not including, the first %x3B (";") character.
      // ...
      stringifiedAttributes += '=' + attributes[attributeName].split(';')[0]
    }
 
    return (document.cookie = key + '=' + value + stringifiedAttributes)
  }
 
  function get (key, json) {
    if (typeof document === 'undefined') {
      return
    }
 
    var jar = {}
    // To prevent the for loop in the first place assign an empty array
    // in case there are no cookies at all.
    var cookies = document.cookie ? document.cookie.split('; ') : []
    var i = 0
 
    for (; i < cookies.length; i++) {
      var parts = cookies[i].split('=')
      var cookie = parts.slice(1).join('=')
 
      if (!json && cookie.charAt(0) === '"') {
        cookie = cookie.slice(1, -1)
      }
 
      try {
        var name = decode(parts[0])
        cookie = (converter.read || converter)(cookie, name) ||
          decode(cookie)
 
        if (json) {
          try {
            cookie = JSON.parse(cookie)
          } catch (e) {}
        }
 
        jar[name] = cookie
 
        if (key === name) {
          break
        }
      } catch (e) {}
    }
 
    return key ? jar[key] : jar
  }
 
  api.set = set
  api.get = function (key) {
    return get(key, false /* read as raw */)
  }
  api.getJSON = function (key) {
    return get(key, true /* read as json */)
  }
  api.remove = function (key, attributes) {
    set(key, '', extend(attributes, {
      expires: -1
    }))
  }
 
  api.defaults = {}
 
  api.withConverter = init
 
  return api
}
 
const Cookies = init(function () {})
 
export default Cookies