Detailed explanation of vue-cli packaging and online steps

This time I will bring you a detailed explanation of the vue-cli packaging and online steps. What are the precautions for vue-cli packaging and online? The following is a practical case, let's take a look.

Take the official example created by vue as an example. When we develop the environment, we will npm run dev to generate

and want to package it into a copy

Very simple, just need npm run build This command

Configuration files of these two commandsIn the index.js of config, one is build and the other is dev , and if we want to view the packaged results locally, we need to change its path in assetsPublicPath. For the specific reason, you can see the file path introduced by index.html

After that, you just need to run it on the server.

*

Common tips

1. If the value of productionSourceMap in the build code in config -> index.js is set to false, the file size after packaging can be Reduce by 80%

2. If you set the HtmlWebpackPlugin plug-in configuration parameter in webpack.prod.conf.js under the build folder and add

hash: true, the package will be generated. js and css paths in index.html with? Random string , which is version control

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

php uses curl to hide and cover the source ip

Detailed explanation of PHP shared memory usage and signal control usage

The above is the detailed content of Detailed explanation of vue-cli packaging and online steps. For more information, please follow other related articles on the PHP Chinese website!