安装小皮面板

官网下载小皮面板

安装完成后启动.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/502.html;
            error_page 503 /error/503.html;
            error_page 504 /error/504.html;
            error_page 505 /error/505.html;
            error_page 506 /error/506.html;
            error_page 507 /error/507.html;
            error_page 509 /error/509.html;
            error_page 510 /error/510.html;
            autoindex  off;
            try_files $uri $uri/ /index.html;
        }

在最后一行加上try_files $uri $uri/ /index.html;即可解决

配置Nginx反向代理

我们在vite.config.js配置如下

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
	plugins: [
		uni()
	],
	server: {
		port: 5173,
		proxy: {
			'/api': {
				target: 'https://saas.dev.takehr.cn', // 目标服务  
				changeOrigin: true,
				rewrite: path => path.replace(/^\/api/, ''),
			}
		}
	}
})

但是vite.config.js并不会被一起打包出来,因此我们部署的axios请求就变成了 http://localhost/api/user/Index/checkSignin这里的localhost就是本地地址,因为没有配置反向代理,Nginx不知道你要匹配什么前缀开头的,又要换成什么请求域名,因此所有的路由访问都变成了404,因此做下跨域配置,如下

找到小皮面板安装文件夹/Extensions/Nginx版本号/conf/vhosts/0localhost_80.conf文件

在server对象里面加入以下配置即可

• /api 代表匹配到/api的请求就会被转发到下面的地址
• rewrite用于将匹配到的/api给去掉
• proxy_pass 后面是我们真实的接口地址

	   location /api {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass https://saas.dev.takehr.cn;
        }

完整配置代码

可以看出上面的操作都是在小皮面板安装文件夹/Extensions/Nginx版本号/conf/vhosts/0localhost_80.conf文件内进行配置的,因此这里贴一下我做完配置后的完整的这个文件的代码

server {
        listen        80;
        server_name  localhost;
        # 配置默认访问目录
        root   "D:/phpstudy_pro/WWW/dist";
        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/502.html;
            error_page 503 /error/503.html;
            error_page 504 /error/504.html;
            error_page 505 /error/505.html;
            error_page 506 /error/506.html;
            error_page 507 /error/507.html;
            error_page 509 /error/509.html;
            error_page 510 /error/510.html;
            autoindex  off;
            # 配置通过url进行解析
            try_files $uri $uri/ /index.html;
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
        # 配置反向代理
        location /api {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass https://saas.dev.takehr.cn;
        }
        # 有更多的代理配置可以往下面继续加即可
}

切记:每次修改完配置后要在小皮面板首页点击Nginx的重启,不然可能不生效