一、下载 nginx并配置
选择稳定版本
下载后解压到指定目录
双击运行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里面根据需求配置不同的内容指向不同的文件夹。总体逻辑是一样的。