Vue项目的部署简述

现在 vue-cli 已经是前端工程师必会的框架了（没有之一），很多前端工程师只会 Vue 项目的开发，并不会部署，因为大部分公司项目的部署工作是交给自己的上级或者项目管理者的，关于部署的相关知识可能大家都不甚了解，今天就给大家深入讲解一下我对 Vue 项目部署的心得和体会！

1.Vue 项目打包

vue 项目的打包可能大家都不陌生，一句 npm run build 就完事了，打包完成后项目会生成一个“dist”文件夹，里面是打包好的“静态文件”。那关于“静态文件”大家可能都不陌生，前端之前的项目都是由静态文件构成的，虽然现在前端的项目工程化了，但是；所谓“万变不离其宗”，它的本来面目还是静态文件而已！

2. 准备静态服务器

我们上文说到 Vue 打包完成后是静态文件，因此我们部署 Vue 项目只需要准备一个静态服务器即可，与 PHP 项目的部署无异。但是有些工程师学过一些 Node.js 自以为很高深，把项目部署在 Node 静态服务文件夹下 …… 然后启动 Node 服务器以带动 Vue 项目。大家说这种方法如何？我只能说这样的项目只是一个“玩具”，因为 Node 本身就不够强大和稳定，更何况它的静态服务呢？

3.nginx 部署

本文为大家推荐的是用 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 项目部署的一些知识，如果还不明白可以在博客下面留言