前端-Nginx部署Vue项目入门教程

前沿

今天和大家讲一下作为前端开发人员，如何通过Nginx部署Vue项目

<hr>
VUE项目

平时我们开发Vue项目时，都是在本地借助NodeJs启动一个本地服务容器，从而把Vue项目跑起来，当我们完成开发后，需要打包编译，最终生成一堆静态资源文件，然后需要把这些文件传到生产的服务器上完成部署

<hr>
Nginx说明

现在服务器上应用或服务，主流基本上都是用Nginx来做服务转发和负载均衡，我们开发完的Vue项目最终也可以通过Nginx来部署

<hr>
Nginx配置

如果直接通过http://www.xxx.com访问这个Vue项目按下面的配置就行了

server { listen 80; // 80是http的默认端口，如果要配置https这里写443并加上安全证书配置 client_max_body_size 10M; // 最大的请求量配置 server_name xxxx.com; // 访问的域名 add_header Cache-Control no-cache; // 不缓存 location /fdlibh5 {    alias /data/web/dist; // 静态资源最终放在服务器的位置    index index.html; // 固定写法，静态资源默认访问的入口文件index.html   // 固定写法，静态资源默认访问的入口文件index.html    try_files $uri $uri/ /index.html; }}<hr>如果想通过http://www.xxx.com/h5（带h5这种contexPath）访问这个Vue项目按下面的配置

server { listen 80; // 80是http的默认端口，如果要配置https这里写443并加上安全证书配置 client_max_body_size 10M; // 最大的请求量配置 server_name xxxx.com; // 访问的域名 add_header Cache-Control no-cache; // 不缓存 location /fdlibh5 {    alias /data/web/dist; // 静态资源最终放在服务器的位置    index index.html; // 固定写法，静态资源默认访问的入口文件index.html   // 固定写法，静态资源默认访问的入口文件index.html,contexPath加上h5    try_files $uri $uri/ /h5/index.html; }}<hr>Nginx配置文件配置好后通过命令保存，并重启nginx服务，让配置文件生效

:wq! // 保存并退出nginx配置文件nginx -s reload // 重启nginx服务，使配置文件生效<hr>觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧