在Windows系统上使用Nginx部署Vue3项目

一、在windows系统上安装Nginx

下载地址：http://nginx.org/en/download.html

将其解压到你自己的文件夹中，比如：C:\nginx-1.25.2。注意nginx的解压路径不能存在中文，否则nginx服务会无法正常启动的哈。解压后目录如下：

二、启动nginx

方法：运行cmd，使用命令进行操作，不要直接双击nginx.exe，不要直接双击nginx.exe，不要直接双击nginx.exe，这样会导致修改配置后重启、停止nginx无效，需要手动关闭任务管理器内的所有nginx进程，再启动才可以。

1、使用命令到达nginx的加压缩后的目录

cd c:\nginx-1.25.2

2、启动nginx服务，启动时会一闪而过是正常的

start nginx

3、查看任务进程是否存在，敲命令或打开任务管理器都行

tasklist /fi "imagename eq nginx.exe"

打开任务管理器在进程中看不到nginx.exe的进程（双击nginx.exe时会显示在这里），需要打开详细信息里面能看到隐藏的nginx.exe进程

如果都没有可能是启动报错了查看一下日志，在nginx目录中的logs文件夹下error.log是日志文件

常见的错误：

(1)端口号被占用

(2)nginx文件夹路径含中文

其他错误就详细看log中的描述

三、修改配置文件（直接文件夹点击进去即可，不用dos操作）

1、在conf目录下找到nginx.conf使用txt文本打开即可，找到server这个节点，修改端口号

2、修改完成后保存后，使用以下命令重新加载配置文件并重启

  .\nginx -s reload

3、之后就打开浏览器访问刚才的域名及端口http://localhost:8800，出现欢迎页就说明部署成功了

四、打包部署vue3项目

1、打包vue3项目：

npm run build

执行上面命令成功后，会把项目打包并输出到dist目录中

2、把刚刚生成的dist目录都复制到nginx目录下的html目录内

3、修改nginx.conf配置文件（包括Nginx解决了部署Vue项目刷新404问题)

具体代码

server {
        listen   8800;  # 监听的端口号，默认是8080
        server_name   192.***.***.***;  # 默认为localhost，如果想要让其他人在自己的电脑上也可以访问，就写本计算机的的ip地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            # 项目打包生成的静态文件所在路径
            root   html/dist;
            #默认主页
            index  index.html index.htm;

            #Nginx部署Vue项目刷新404问题
            try_files  $uri $uri/ @router;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

        location /api {
	        proxy_set_header Host $host;
	        proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;		
            # 后台接口地址
	        proxy_pass https://*****/api*;
            proxy_redirect default;
	        add_header Access-Control-Allow-Origin *;
	        add_header Access-Control-Allow-Headers X-Requested-With;
	        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
	    }

测试

在其他的电脑上打开浏览器访问刚才的域名及端口，成功！

参考教程：http://www.lsjlt.com/news/351860.html