nginx部署vite4+vue3项目（解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等）

前言

还是那句话，学有所感，记录如下。

一、下载nginx

进入nginx官网直接下载即可：http://nginx.org/en/download.html

选择稳定版，我这里选择windows来演示：

下载完成之后，解压，进入nginx-1.24.0 文件夹中，nginx目录如下：

主要文件目录介绍如下：

conf：nginx的一些配置文件
html：前端的打包文件主要放在这个地方
logs：日志文件存放目录
nginx.exe：用来启动nginx的程序

我们启动测试一下nginx是否能够正常使用，双击运行即可启动。不过程序会一闪而过，不太友好，我们这里通过命令行的方式进行启动。

通过命令行进入nginx.exe所在目录，如图：

进入cmd命令行界面：

输入命令启动nginx：

start nginx

不报错说明启动成功，如图：

在浏览器输入localhost，显示如下页面说明能够正常启动：

二、同一个nginx部署多个项目

视频地址：https://www.bilibili.com/video/BV1fG4y1a7Sv/?spm_id_from=333.337.search-card.all.click&vd_source=5f425e0074a7f92921f53ab87712357b

这里虽然只是演示了两个最简单的页面，但是复杂的项目的部署流程也是类似的。

三、页面空白问题

文章地址：https://blog.csdn.net/qq_42071369/article/details/128379046

看这部分的配置即可：

三、页面刷新404问题

上面的文章中其实已经讲了，加下面一句话即可，具体的路径取决于项目本身：

try_files  $uri $uri/ /xxxxx/index.html;   #解决刷新404

四、在vite.config.js中配置跨域代理访问不了后端接口问题

vite.config.js如何配置跨域以及解释，请看这篇文章：https://blog.csdn.net/weixin_45750972/article/details/127223955

在nginx.conf中的配置请看这篇文章：https://www.cnblogs.com/dengsheng/p/16778586.html

这里要注意的一点就是，/api和后端地址最后加不加/，取决于自己的项目有没有加，如果项目如图：

那配置文件中也不需要加/，反正如果访问不了的话，你就加上或者去掉，来回尝试即可！

注意

如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.

最后我们配置文件如下：

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		# 这个代理和项目无关
        location / {
            root   html;
            index  index.html index.htm;
        }
		
		# 代理自己的项目
		location /cees-client {
			alias	html/cees-client;
			index	index.html;
			# autoindex on;
			try_files  $uri $uri/ /cees-client/index.html;   #解决刷新404
		}
		
		# 配置代理vite中的跨域
		location /client {
			proxy_pass	http://43.136.31.72:7804;
		}
	}