Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

How to internationalize the front end (I)

How to internationalize the front end (Middle)

Serialized reading experience is better

International deployment solution for the front end

Front-end deployment is currently divided into two types: one is deployed on the Tomcat server following the back-end project, and the other is deployed independently on node or Nginx.

However, if we divide it into local build deployment and online build deployment, we should actually divide it into git project deployment after build and online deployment with source project.

The difference is that the former puts the built files in the Git project, while the latter is the source code and the built files are generated only at deployment time.

Build locally and deploy

The difference in internationalization is that a git code needs to be deployed in multiple regions. If the constructed files are placed in the same path for different regions, we will have to rebuild them every time we deploy to different countries. Not only the operation is tedious, but also it is easy to cause the problem that files in different countries do not correspond to each other when we go online.

In order to avoid each deployment 1 have to rebuild 1 and then set up the current national code, we need to put in different parts of the packaging after the file under a different path of git, so as to avoid every time we have to repack coverage problem, also can avoid online file does not correspond to different countries.

In China such as backend engineering code and Thailand station respectively in the webapp/China/index. The HTML and webapp/Thailand/index. In the HTML; The Nginx project is similar.

Because the placement path is different, in order to ensure that the system access address of China station and Thailand station is consistent except the domain name, you can configure back-end routing or nginx route to return different front-end files according to different regions.

Different regions output different folders when packaging

In vue-cli 2, modify the assetsRoot of the build in config/index.js. In vue-cli 4, modify the outputDir of vue.config.js. Generate files of this region during construction. For example, the Chinese station is dist/ China folder after packaging.

Build and deploy online

With this approach, you simply execute the package commands for different locales at build compile time and then deploy.

The appendix

Js-cookie.js (other cookie packages can also be used)/* JS-cookies do not support ES6 syntax, separate out to make compatible *! * 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
      }
 
      // A brick 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
Copy the code

How to internationalize the front end (I)

How to internationalize the front end (Middle)

Serialized reading experience is better

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

React Development specification

Vue development specification

Mobile end horizontal and vertical screen adaptation and bangs adaptation

Mobile frequently asked Questions

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage