Linux服务器nginx部署Vue前端（详细版）

呼啦啦呼啦啦啦啦啦啦2023-12-23 4:37

提示：适用于前后端项目的部署

文章目录

前言
一、打包前端文件
二、下载和部署Nginx
三、配置conf文件
启动nginx

前言

搜索到这篇文章想必你已经对Nginx比较了解，我也不对Nginx进行介绍赘述了，只需要明白Nginx本身也是一个静态资源的服务器，当只有静态资源的时候，就可以使用Nginx来做服务器。下面我将直接介绍如何在Nginx部署前端文件的整个流程。

一、打包前端文件

打包前端文件，打开前端包管理器，使用

bash 复制代码

npm run build

打包该项目，打包完成可以发现项目中多了个dist文件夹

二、下载和部署Nginx

这一步可以参考我之前写的点击这里

三、配置conf文件

这一步是重中之重，打开winscp，当然你有更好的也行（只要支持SSH的SFTP文件传输），人话就是能够支持文件上传服务器或编辑服务器文件内容，打开nginx目录下的conf文件夹找到，nginx.conf文件，双击打开。

bash 复制代码

server {
        listen       80;#nginx监听端口
        server_name  localhost;#指定了本机的域名或主机名
        location / {
            root   /home/dist/;#前端应用程序的根目录
            index  index.html;
        }

在原有基础上http { } 内容中加入上述内容。注意这些都要一一对应，举个例子需求是在190.21.3.1服务器40端口部署前端，前端文件放在home文件下

bash 复制代码

server {
        listen       40;#nginx监听端口
        server_name  190.21.3.1;#指定了本机的域名或主机名
        location / {
            root   /home/dist/;#前端应用程序的根目录
            index  index.html;
        }

注意把前端打包后的dist放到root中路径指定文件夹下。

启动nginx

bash 复制代码

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

启动nginx即可，如果nginx已经启动可参考我上面的文章，先关闭再启动，或直接使用重启指令即可。