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