windows服务器使用nginx部署vite vue项目

一、下载 nginx并配置

nginx: download

选择稳定版本

下载后解压到指定目录

双击运行nginx

配置文件开放端口为80，运行后可通过localhost:80访问是否成功。出现welcome nginx....为成功

可打开conf文件夹-->nginx.conf更改端口

记得在云服务器设置中放开5000这个端口，在安全组配置中。

二、vue项目的配置

上图中是生产环境url的配置，/yida前面是服务器地址，5000是给nginx开放的端口，/yida是前文截图中nginx.config的配置代理的那个红框，为了让nginx识别。

然后命令行npm run build进行打包。把生成的dist文件夹下的内容复制到下图

在上图路径输入cmd，然后输入命令行 nginx.exe -s reload重启nginx

如果一切顺利的话，在本地输入服务器地址+配置的开放端口即可正常访问，且跨域问题也会解决。

若有问题，欢迎在评论中提出。

多项目部署这里就不做赘述了，大概思路就是 nginx.config 里面多配置几个service，html文件夹下自己新建几个不同名称的文件夹，每个service里面根据需求配置不同的内容指向不同的文件夹。总体逻辑是一样的。