安装小皮面板
官网下载小皮面板
安装完成后启动.exe文件在安装文件夹的COM/phpstudy_pro.exe双击即可打开小皮面板
切记:安装路径不能有中文
打开小皮面板软件,找到首页
点击Nginx启动
浏览器访问localhost或者127.0.0.1就能看到默认的启动页面了,如果出现了页面就代表一切正常
部署网站
找到安装文件夹/WWW文件夹,默认访问的就是WWW文件夹下面的index.html文件
如果下面新建WWW/aaa/index.html文件夹和文件,访问方式可以改成localhost/aaa或者127.0.0.1/aaa就可以访问到里面的文件
例如打包出来的是dist文件夹,那就把dist文件夹下面的东西都拷贝到WWW的目录下即可通过localhost或者127.0.0.1访问,或者是把dist文件夹复制到WWW文件夹下,通过localhost/dist或者127.0.0.1/dist访问
修改默认访问目录
找到小皮面板安装文件夹/Extensions/Nginx版本号/conf/vhosts/0localhost_80.conf文件
修改下面的root就是默认访问路径,也就是localhost默认打开的路径
root "D:/phpstudy_pro/WWW/dist";
修改完后就可以通过localhost访问到WWW/dist文件夹下面的index.html了
解决路由刷新丢失问题
在打开页面时会去访问
localhost这个地址,例如vue项目有很多路由跳转,地址栏会携带参数,在页面内也能正常跳转,但是如果刷新一下就会发下页面访问是变成了404页面,这是因为默认的访问都是找的文件夹,例如访问localhost进入了首页,但是由于未登录重定向到了localhost/login这个登录页面,这时候在页面内是正常的,因为这是路由间的跳转,但是如果刷新页面了,Nginx默认是找的默认访问路径/login文件夹下面的index.html,但事实上并没有这个文件,所以404了,因此这里要配置一下,找不到对应的html就从url地址上去匹配,解决方式如下
找到小皮面板安装文件夹/Extensions/Nginx版本号/conf/vhosts/0localhost_80.conf文件
location / {index index.php index.html;error_page 400 /error/400.html;error_page 403 /error/403.html;error_page 404 /error/404.html;error_page 500 /error/500.html;error_page 501 /error/501.html;error_page 502 /error/