?? 主页?? 感谢各位大佬 点赞?? 收藏 留言?? 加关注! ?? 收录于专栏前端工程师 * *#### 文章目录一、??什么是nginx* 二、??nginx 部署前端vue项目步骤* * 2.1 ??安装nginx * * 2.1.1 ??windows环境安装 * 2.1.2 ??linux环境安装 * 2.2 ??打包vue项目 * 2.3 ??配置nginx* *一、??什么是nginx-------------Nginx是一款轻量级的HTTP服务器采用事件驱动的异步非阻塞处理方式框架这让其具有极好的IO性能时常用于服务端的反向代理和负载均衡。优点支持海量高并发采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接实际生产环境中可以支撑2-4万并发连接数。* 内存消耗少* 可商业化* 配置文件简单 除了这些优点还有很多比如反向代理功能灰度发布负载均衡功能等二、??nginx 部署前端vue项目步骤---------------------### 2.1 ??安装nginx#### 2.1.1 ??windows环境安装到nginx官方下载系统相关的nginx版本安装启动命令 cd F: ginx-1.19.4 start nginx #### 2.1.2 ??linux环境安装通常情况下很少使用windows来作为nginx的服务器一般使用linux。对于linux安装nginx有两种方式一种是使用官方已经编译好的包来安装一种是使用源码构建安装。第一种方式参考官方地址https://nginx.org/en/linux_packages.html#stable第二种方式参考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段这种实际上就是下一个tar.gz包仍到linux服务去自己编译。在linux服务上和window环境上使用nginx部署vue项目并没有太大差异把构建好的vue项目dist上传到linux服务上通用修改nginx服务器中的root来指向dist就ok了然后使用 # centos 7 systemctl restart nginx.service # centos 6 service nginx restart # 或者是平滑重启 service nginx reload ### 2.2 ??打包vue项目执行命令 npm run build### 2.3 ??配置nginx修改nginx配置文件配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段 server { listen 80;#默认端口是80如果端口没被占用可以不用修改 server_name localhost; root E:/vue_project/my_project/dist;#vue项目的打包后的dist location / { try_files $uriKaTeX parse error: Expected EOF, got # at position 14: uri/ router;#̲需要指向下面的router否…/index.html last; } #…其他部分省略 } 完成nginx配置后重新加载配置文件 nginx -s reload nginx -s reload 浏览器中访问http://localhost 测试是否部署成功