主域名配置的那个项目正常配置就可以了,但是对于子地址的项目,需要做很多的配置的。
注意
子地址的那个项目在配置中需要配置为子地址:
base: '/subpk'
在vite.config.ts中修改:
如果这里没有配置正确,会导致白屏或者加载静态资源地址不对!假设你配置的子地址是subpk,那么你的静态资源应该也要是这个地址加载的。但是如果白屏的时候,可能就不是这个地址加载了。
配置Nginx
先创建一个静态的html文件,然后放到服务器的/var/www/subpk目录下
1. 确保你的 HTML 项目存放在服务器上
假设你的 subpk
项目存放在服务器的 /var/www/subpk/
目录下。
如果没有该目录,可以执行:
mkdir -p /var/www/subpk/
然后将你的 HTML 文件上传到该目录。
2. 修改 Nginx 配置
打开你的 Nginx 配置文件(通常位于 /etc/nginx/sites-available/default
或 /etc/nginx/nginx.conf
,也可能是 /etc/nginx/conf.d/dev.fai-link.com.conf
,具体路径取决于你的服务器环境),然后添加如下配置:
server {
listen 80;
server_name 你的域名;
location / {
root /var/www/react_project/; # 你的 React 项目路径
index index.html;
try_files $uri /index.html;
}
location /subpk {
# 注意这里不要写/var/www/subpk!!!!,而是/var/www/
root /var/www/;
index index.html;
}
}
说明:
server_name 域名;
指定你的主域名。location /
配置 React 项目路径。location /subpk
指定http://域名/subpk
访问/var/www/subpk/
目录下的index.html
。
3. 检查 Nginx 配置并重启
执行以下命令检查 Nginx 配置是否正确:
nginx -t
如果没有错误,重启 Nginx 使配置生效:
sudo nginx -s reload
4. 访问测试
在浏览器输入 http://域名/subpk
,检查你的 HTML 页面是否正常加载。
这样就成功地在 http://域名/subpk
下配置了你的 HTML 项目。