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

This section mainly explains how to internationalize vUE single page applications with separate front and back ends.

How to internationalize the front end (Middle)

How to internationalize the front-end (ii)

Serialized reading experience is better

I. Internationalization of engineering projects

The internationalization of the project is mainly divided into two parts: 1. Function tailoring and customization; 2. Internationalization of copywriting.

This article is mainly about: function tailoring and customization

Copywriting internationalization is to make the copywriting in the page into a language that can be switched, and then display the copywriting in the corresponding language. It is mainly to maintain multiple key-values in the project, and obtain the corresponding value in different languages through the same key.

Function tailoring and customization, is different countries for the function of the demand is not the same, generally as long as part of the domestic system functions; As for the custom, is part of the show or interact to change to meet the demands of a country, for the front-end, generally do not do too much customization requirements, or code is difficult to maintain, and take up research and development of domestic resources, when appear too much customization requirements, suggested by the corresponding national localization of research and development team to undertake the development of the front-end.

Function tailoring and customization

Function cutting, such as: which menu items to the head, not certain routes, mobile phone number verification add country code, some content difference display, etc.

To make this distinction, we need to know which country’s logic is currently running when we develop or package builds, i.e. we need to know which country is currently running in our code.

Here, the current environment variables are passed into the business code using the webpack.definePlugin plugin, which is used to pass in environment variables, via the Webpack configuration item plugins.

First, we need to have a list of configuration items for different countries.

In the configuration of the country, we need to pass in which country it is currently and its personalization (for feature tailoring, etc.).

We create the locale folder under the root directory, which is used to configure the configuration of different countries for internationalization. The directory structure is as follows:

├── Locale │ ├── China.js ├─ index.js import │ ├─ Thailand.jsCopy the code

Index.js file contents:

const China = require('./China')
const Thailand = require('./Thailand')
 
const config = {
  China,
  Thailand
}
 
const currentDistrict = process.env.DISTRICT || 'China'
 
module.exports = {
  name: currentDistrict, // Current country identifier
  config: config[currentDistrict] || config['China'] // The configuration item of the current country
}
Copy the code

Index. js directly obtains the environment of the country being executed from the environment variable. For example, the current execution is China, and the configuration of the China station is exposed externally.

For environment variables, we can pass in package.json, for example:

  "scripts": {
    "dev": "* * * *".// Project dev runs
    "build": "* * * *".// Project package
    "dev:th": "cross-env DISTRICT=Thailand npm run dev"."build:th": "cross-env DISTRICT=Thailand npm run build"
  }
Copy the code

A local run of Thailand and a build package of Thailand are configured so that the country in the environment variable can be retrieved from process.env.district in the Node code (which is what the package executes).

As for the content of China.js and Thailand.js, it is an object configuration with the same key and structure, except the value.

China.js

module.exports = {
 languages: ['zh_CN'.'en_US'].cookieDomain: 'jd.com'.// language Specifies the domain name of the cookie written into the language field
 passport: 'https://passport.shop.jd.com/login/index.action?ReturnUrl='.stream: {
   siteId: 'JA2018_1131074'.domain: 'jd.com'
 }, // The meridian station
 urls: {
   openUrl: 'open.jd.com'.jdUrl: 'jd.com'. },functional: {
   openLayout: true.// Whether the header shows the open layout
   vapp: true.// Whether the header displays applets. }Copy the code

The above configurations are basically country-specific configurations that need to be modified for an internationalization project:

  • Languages Sets what languages are supported in the current country. Some items are obtained through the back-end interface, but this will cause the contents to be displayed after the return of the back-end interface. Such serial Settings will result in slow page rendering
  • CookieDomain When the user switches the language switch on the interface, we need to write cookies in the language to be switched, so we need to know which domain name is written
  • Passport Specifies the address to log in to
  • Stream meridian configuration
  • Urls outside the chain, etc
  • Functional tailoring configuration, depending on what function you want to tailoring

We then need to pass this configuration through Webpack into an environment variable in the business code.

Here there are two environment variables, one is the system environment variable, passed into the Node code, the other is the business environment variable, passed into the business code via Webpack, two are not general. The environment variables passed in by the package cannot be retrieved directly from the business code. They must be retrieved by the Node code and passed in via webpack.

The Webpack configuration is as follows:

const webpack = require('webpack')
 
plugins: {
  new webpack.DefinePlugin({
    'process.env.DISTRICT': JSON.stringify(xx country configuration xx)})}Copy the code

Then how to get the incoming country configuration in the business code, we will go straight to the next section “Internationalization of copywriting”, and the feature tailoring will continue in the next section.

How to internationalize the front end (Middle)

How to internationalize the front-end (ii)

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