Vue项目打包

柔情只为你懂 2021-09-20 07:40 427阅读 0赞

**如果你还没有搭建Vue环境，请参考我的这篇文章\[[https://blog.csdn.net/u012577474/article/details/92849764][https_blog.csdn.net_u012577474_article_details_92849764]\]**([https://blog.csdn.net/u012577474/article/details/92849764][https_blog.csdn.net_u012577474_article_details_92849764])

## **Vue项目打包步骤：** ##

终端运行命令 npm run build  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]  
打包完成后，在我们的app根目录下会生成dist目录。即为打包后的目录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]  
dist目录下为静态资源打包压缩文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]  
我们打开build.js，可以看到部分内容如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]  
把打包后的web部署到服务器，拷贝下面2个文件到web服务器，浏览器访问index.html就可以了。  
![在这里插入图片描述][20190620133648887.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]

[https_blog.csdn.net_u012577474_article_details_92849764]: https://blog.csdn.net/u012577474/article/details/92849764
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]: /images/20210726/11aeb76d2b714568ac8697ef7df8bb58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]: /images/20210726/9ab4f90cc2f64f9e9f3a37fbfea19ab2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]: /images/20210726/ed78c6b0d9334b99aca7a302552415c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]: /images/20210726/444d49962f484b7390f6a24b0b6e13ad.png
[20190620133648887.png]: /images/20210726/2569dc9a40284ec0abadb7890fbfa2e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]: /images/20210726/46492fc3f34a46809f17c6b9dd127c3d.png