小皮面板 phpstudy(nginx模式)搭建vue 项目 使用 history模式配置详解

1.首先复习下普通nginx服务器配置vue 项目 history模式的方法

vue项目内部配置这里不再赘述,不知道的可以自行百度。
这里主要说下nginx配置:
nginx目录下找到conf文件夹下的conf下的nginx.conf文件并打开

修改server下location,如下图:

代码如下:

location / {
    root   html;
    index  index.html index.htm;
	try_files $uri $uri/ /index.html;
}

经过上面配置后就可以使用vue的history模式了,项目打包发布后
访问类似: xxx.com/product/detail/:id 这种多层嵌套路由就不会报
404了,下图1为未配置前案例,图2为配置后的
图1:

图2:

2.今天的重点来了,小皮面板的nginx服务器配置 vue history模式

再啰嗦两句,说下为什么要用小皮面板:
最早的时候我是发布php项目,刚开始的搭建环境的时候是真费劲,下载php安装包,配置系统环境变量,完了又是apache,mysql,对于一个新手来说真的是很复杂。
其次就是用普通nginx服务器的话,一个域名只能用一个不带端口号的地址，比如我的域名是 sanqizhouyi.com 这个站用了80端口,访问的时候可以直接 sanqizhouyi.com这样访问,在这个域名下再放另一个网站就得,监听别的端口比如81端口, 这样访问的时候就得 sanqizhouyi.com:81, 这样看着让人很不舒服,哪怕是配置二级域名,也会重定向到80那个端口
所以我选择了用小皮面板,我估计是他们做了额外的配置,只要你在网站列表配好了域名端口都是80,但你只需输入域名不用带端口就可以直接访问
如下图:

好菜不怕晚,正题来了,如何配置,
vue history项目打包发布到小皮后,多级路由是不能直接访问的,上面已经截图说过,
所以我想到了需要配置小皮面板内置的nginx,于是找到位置如下:

然后打开修改

但是修改后没有作用,多级路由 (xxxx.com/prod/list/detail)依然无法访问,
百度查了好久,也没有相关帖子,
折腾了好久最后放弃了,其它网站用小皮面板,然后这个history的单独启一个nginx来跑,
结果让我爆炸的问题来了,因为这个项目用了80端口,竟然把我小皮面板里的项目两个项目顶掉了
研究了好久后来终于找到了答案,功夫不负有心人啊

在这个文件里加上这一行

然后重启小皮的nginx,大功告成