使用Nginx部署多个前端Vue项目

前言：

• 细心很重要，其次就是对vue cli 生成的项目目录，了解多少，项目启动后，文件目录的文件，是怎么顺序被执行…

第一步：vue项目中的配置

• 1.  创建vue.config.js 文件（该文件会被 @vue/cli-service 自动加载）详情见：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

• 2.  路由文件中配置，

• 3.  在public中的index.html 配置

第二步：修改Nginx上的配置文件

• 1.  进入nginx目录下，在html文件夹下创建目录（这里的文件名zhong），然后将npm run build 打包后生成的dist文件夹中的文件copy到新创建的目录~zhong即可。（个人推荐，上传文件或创建文件夹使用fileZilla，将桌面的文件，拖到服务器对应的位置即可）

• 2.  修改nginx下的配置文件（我自己一共配置了三个前端项目）

最后：暂停nginx服务，重新开启即可。

• 1. 启动nginx的命令为 /usr/local/nginx/sbin/nginx
• 2. 停止nginx的命令为 /usr/local/nginx/sbin/nginx -s stop

• 访问：http://域名/zhong/  或  http://ip:端口号/zhong/（细节很重要，域名后面的名称末尾不要忘记斜杠！）

若你是第一次配置，可以先配置一个项目的配置，其中有部分知识解析，见我另一篇：
https://blog.csdn.net/qq_41930094/article/details/118153719?spm=1001.2014.3001.5502