The reason why Vue is so popular now is partly due to the official scaffold generation tool VUE-CLI, which greatly simplifies the cost of setting up beginner’s environment. However, in actual business, we often need to realize other functions to transform WebPack. This paper will be based on some actual business requirements. Learn the template generated by VUE-CLI first, and then modify it.

Vue-cli generates template file directory

├── Build │ ├─ build.js │ ├─ check-versions │ ├─ logo.js │ ├─ webPack.base.conf │ ├ ─ ─ webpack. Dev. Conf. Js │ └ ─ ─ webpack. Prod. Conf., js ├ ─ ─ the config │ ├ ─ ─ dev. The env. Js │ ├ ─ ─ index. The js │ └ ─ ─ the prod. The env. Js ├ ─ ─ Index.html ├ ─ ─ package. Json ├ ─ ─ the SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ assets │ │ └ ─ ─ logo. The PNG │ ├ ─ ─ components │ │ └ ─ ─ hello.html vue │ └ ─ ─ The main. Js └ ─ ─ the staticCopy the code

The main points of this paper are

Build-the code for the compile task

Config – configuration file for Webpack

Package. json – Basic information about the project

The meaning of the webpack configuration for each line is not covered here, please refer to the webpack configuration file analysis for vue2.0 scaffolding

Common requirement 1: Multi-environment configuration and publishing

Vue-cli generated template, only configure the NPM run dev, NPM run build script, respectively to start the development environment service and execute packaging. And often the normal company development process will have at least the development, test simulation, production environment, and each environment responds to the server request address, or some configuration parameters will be different, and when the release needs to be released to multiple servers, so the need to implement automation script. Build and publish.

Understand the deployment code process

We first have to figure out this problem, reprint a paragraph of article, author: Zheng Haibo, link, source: Zhihu

This has nothing to do with VUE, but is a general issue: where the code is built. If by server, you mean a running server, then neither is a good choice. A lot of new people, including me, think this is how they deploy code before they startBut it’s actually a little more difficult at the larger Internet companies. The following are common practices and simplify the process, just to make it easier for newcomers to understand. The code is submitted to git or SVN server. Note that this is the source file, not the build file2. The build server pulls the code version from the Git server to complete the installation of dependencies, such as vue. And build the files for deployment, which are also typically compressed into a compressed package for administration3. The built distribution package is uploaded to the hub: file management server cluster4. The actual running server is usually a cluster rather than a single server. The N servers pull the same compressed package of the corresponding version from the file server and decompress the packageIn fact, there is an obvious sequential process that would be very cumbersome to do manually, so most large companies have an automated deployment platform to do all the work globally. As a developer, you just need to click on “One-click deployment” to do all the workFor example, in cooperation with webhook automatic notification and automatic deployment platforms such as GitLab and Github, the stable version of the code has completed the Push Event. Then we don’t even need to click a button. This Case is a typical build deployment of separation, the benefits of very much, such as to ensure the building is a code, avoid environment build more lead to inconsistent the possibility of constructing the general is a behavior of high costs, may cause unstable can quickly run the server rollback or reply, the same version of the code without refactoring build…

With all this said, packaging builds is not a straightforward task, and requires automated tools to configure them

Manually modify the vuE-lic webpack configuration, combined withfjpublishPackage multiple environments for release

The main operation is to configure the environment variables to be configured into the corresponding files in the./config directory

The specific configuration process is described in another article of mine

Portal: vue.js +Element-UI from 0 to Deployment: Basics (3). Front-end automation, multi-environment configuration to release)

DockerContainer technology

The construction process of the above large companies is very complicated. Docker can be used for container configuration. If I am not familiar with it, I can send a link to learn about it

The next section will continue to follow vue-CLI to ‘learn’ and ‘change’ the packaging optimization of Webpack