如今vue-cli已是前端工程师必会的框架了(没有之一),不少前端工程师只会Vue项目的开发,并不会部署,由于大部分公司项目的部署工做是交给本身的上级或者项目管理者的,关于部署的相关知识可能你们都不甚了解,今天就给你们深刻讲解一下我对Vue项目部署的心得和体会!html
1.Vue项目打包前端
vue项目的打包可能你们都不陌生,一句npm run build就完事了,打包完成后项目会生成一个“dist”文件夹,里面是打包好的“静态文件”。那关于“静态文件”你们可能都不陌生,前端以前的项目都是由静态文件构成的,虽然如今前端的项目工程化了,可是;所谓“万变不离其宗”,它的原本面目仍是静态文件而已!vue
2.准备静态服务器nginx
咱们上文说到Vue打包完成后是静态文件,所以咱们部署Vue项目只须要准备一个静态服务器便可,与PHP项目的部署无异。可是有些工程师学过一些Node.js自觉得很高深,把项目部署在Node静态服务文件夹下......而后启动Node服务器以带动Vue项目。你们说这种方法如何?我只能说这样的项目只是一个“玩具”,由于Node自己就不够强大和稳定,更况且它的静态服务呢?vue-cli
3.nginx部署npm
本文为你们推荐的是用nginx部署Vue项目,nginx能作的事情太多了,咱们经常使用的有:正向代理、反向代理、负载均衡等,它的知识你想学三天三夜都学不完,以前在图书馆看到nginx的教程有那么厚,而咱们用不到那么多,只须要学会用nginx部署咱们的Vue项目就能够了,如下是最简单的nginx配置:服务器
http { include mime.types; default_type application/octet-stream; sendfile on; server { listen 80; #端口 server_name localhost; #可换成你的域名 root /var/www/vue/; #项目目录 index index.html; } }
好了,以上就是Vue项目部署的一些知识,若是还不明白能够在博客下面留言前端工程师