下面笔者会写出一份详细的操作及配置流程,供大家参考学习!
这里,是有一台“云服务器”(笔者的是华为云服务器),一款“Xshell借助它来操作服务器,一款“Xftp借助它来给服务器相对的位置上传项目文档,不知道的,可以通过点击进去查看,里面有各自详细的使用教程。vue项目的打包 npm run build,下面的所有操作都建立于xshell和服务器连接成功的基础上,并且nginx已经安装成功,没有安装的,请自行查找资料,笔者忘记了整理了,但是整理了windows服务器的安装教程,点击这里查看

是否连接上云服务器

在这里插入图片描述

进入nginx文件下

在这里插入图片描述

进入 nginx.conf 文件并配置第一个项目

先说明下,笔者这里采用的不是在同一个 .conf 文件配置,为什么呢?因为如果配置文件出现问题,则所有项目都会出现问题,笔者采用的是多个 .conf 文件(一个项目一个 .conf 文件,文件命名最好用项目名称英文来创建,目的便于后期的区分),这样就是一个主进程,其它的都属于它的子进程,子进程出现问题,之间互不影响。

第一个项目配置

nginx.conf
在这里插入图片描述

第二个项目配置

cqdz-view-nginx.conf ,到这里,有的人会问,如何创建第二个后缀为 .conf 文件, 还是通过编辑默认 vim cqdz-view-nginx.conf,进入该文件,然后进入“插入模式(i)”,随便写点啥,保存退出:wq,这样一个新的后缀为 .conf 文件就创好了。
在这里插入图片描述

将创建的后缀 .conf 引入主后置 .conf

第二个项目配置完成后,返回第一个项目配置文件(主文件)
在这里插入图片描述

到这里,基本的配置已经完成,后面再多的项目都是如此一样。笔者亲调有效!!

突然回想起这块遇过的一个问题:静态资源加载 404 not found
项目访问到了,就是界面加载不出来
在这里插入图片描述
笔者改了这里,再也没有出现错误了。

欢迎在评论区交流!!!!

Logo

前往低代码交流专区

更多推荐