In the front-end development process, the development of project coding is a necessary ability, but after the development of online is also an indispensable skill. And now the front-end development with packaging are by means of three-party plug-in to complete, this blog to share the front-end project packaging process steps, this case to Vue to introduce, other front-end technology packaging steps are not too much here.
Vue project packaging is generally based on webpack+ VUE-CLI operation, the specific operation command is also very simple, just need to enter the packaging command in the terminal: NPM run build press enter to package. However, it should be noted that a complete vuE-CLI project is required, which is initialized by vue init webpack. Otherwise, no package file can be packaged. (A project initialized with vue init webpack-simple does not have a package file and cannot be packaged).
The specific packaging steps are as follows:
1. Open the Vue project and modify the project version in the vue.config.js file.
2. Enter the package command: NPM run build and press Enter in the terminal at the bottom of the project to package;
3. After a short wait, if there is no error in the project, the package will be directly prompted to complete;
4. After the package is successfully packaged, a “dist” file directory will be generated in the project directory, and then click open, you can see the files in the dist directory;
5. Then right-click dist file, find the file location and enter it, compress and package dist file, and upload it to the server.
Appendix: The details of the directory in the dist file packaged by Vue project are as follows:
The. CSS file under the CSS folder is the CSS file to be used by the project. When doing webpack, all CSS styles will be packed into this file.
The.js.map file in the js folder is a Source map file, which is an information file that stores location information. Each position of the transformed code corresponds to the position before the transformation. Easy to debug JS code during development.
The manifest.json file can be understood as a configuration file generated by the Webpack package and is generally ignored.
Index. HTML is an HTML file in the entry of the front-end code.
The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “iOS development by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention to it!