This is the third day of my participation in the More text Challenge. For details, see more text Challenge

Front-end packaging is currently mainly two aspects: packaging compressed files and backend API access address. There are also other nginx and Docker deployments, which are beyond the scope of this article.

The packaging command is simple

npm run build
Copy the code

Local development access:

Local development is the development environment, because the project is started locally, the development environment can solve cross-domain related problems through the interface proxy, so we can configure the access address is relatively easy. In order to uniformly handle interface access, the front end sets baseUrl, where BMS is the application address prefix.

// Path: SRC /services/ baseurl.js

// eslint-disable-next-line import/no-mutable-exports
let baseUrl = '/api/bms';

export default baseUrl;
Copy the code

Proxy configuration file

// Path address: config/config.js

proxy: {
  '/api/bms': {
    target: 'http://xxxxx:8000/'.changeOrigin: true.pathRewrite: { '^/api/bms': '/'}},},Copy the code

Here **/ API/BMS corresponds to baseUrl of baseurl.js. When accessing an address: The interface accesses/API/BMS /interface*. Through the agent becomes http://xxxxx:8000/interface here may ask, where API/BMS. Because this line of code:

pathRewrite: { '^/api/bms': '/' },
Copy the code

Will change/API/BMS to/via proxy

Server deployment address:

Understanding the local environment and server deployment

Because the server deployment goes to the package file, and local development is very different, there is no proxy, access is static files. So at this point we only have/API/BMS in baseurl.js. This is a relative path, so direct access is a problem. A simple example: at present, the BMS development environment to deploy the address is: http://xxxxx:8000 that our server deployment interface to access the address is: http://xxxxx:8000/api/bms/interface. Then the development environment of swagger address is: http://xxxxx:8001/interface. This definitely doesn’t fit. So you need the front end to do it inside the current baseurl.js file. Now our file is a relative path, so we need to process it into the absolute path of the corresponding environment. So there’s a question here, right? We now have three environments, development, test, and production. Which one to write? There needs to be a variable to determine the correct background access address interface for different environments.

let baseUrl = '/api/bms';

// eslint-disable-next-line no-undef
if (BUILD_TYPE === 'build') {
  baseUrl = 'http://xxxxxx:8001/api/bms';
}

if (BUILD_TYPE === 'qa') {
  baseUrl = 'http://yyyyy:8001/api/bms';
}

if (BUILD_TYPE === 'release') {
  baseUrl = 'http://zzzzzz:8001/api/bms';
}

export default baseUrl;

Copy the code

Set the environment variable BUILD_TYPE

So we’re using BUILD_TYPE, but where is the value set, when we execute the packaging command. Package. The json file.





And you can see in the diagram that I’ve circled there are three commands, and all three commands have BUILD_TYPE, and you can see here what this is all about, just to distinguish between different environments, by different packaging commands, and then different BUILD_TYPE, And you can see here that you’ve actually done what you need to do on the front end. But here just write the command, but who will trigger the command ah, the server will not be able to execute the command to us, and the need for manual, it is a little too low.

Points to note in the back end:

Previously encountered is, the early development, until the deployment of the environment will appear cross-domain problems, and then look for the back end of students, will ask, why ah, has not been used well.

Answer: because of the early development of the local environment, the local interface agent processing, the project structure comes with, so there will be no problem. Once the server is deployed, the back-end interface is needed for cross-domain processing. Because there are many ways to handle cross-domain processing, the front-end proxy or the back end does cross-domain processing. So if you have time, you need to know about same-origin policy and cross-domain processing.