网硕互联帮助中心0. 本地项目添加配置
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: '/delayed-coking-demo/', // <— 加上这一行，注意前后都有斜杠
})
1. 在你的开发电脑（本地）VS Code 终端运行，确保根目录下生成了dist 文件夹。
npm run build
2. 在服务器上安装 Nginx
在远程桌面的那个 Windows 里操作（就像操作你自己的电脑一样）：
- 打开服务器里的 Edge 浏览器（或者你在本地下载好，复制粘贴进去）。
- 访问：http://nginx.org/en/download.html
- 下载 Stable version 下面的 nginx/Windows-1.xx.x (zip格式)。
- 将下载的压缩包解压到 C 盘根目录，例如：C:\\nginx。
- 打开这个文件夹，你会看到 nginx.exe 和 conf, html 等文件夹。
3 . 上传你的项目代码
4. 修改 Nginx 配置 (解决路由刷新 404)
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
# — 这里开始是 Server 配置 —
server {
listen 80;
server_name localhost;
# 1. 默认根目录 (访问 http://ip 时显示的内容)
# 只要 html 文件夹里有 index.html，这里就会显示
location / {
root html;
index index.html index.htm;
}
# 2. 你的新项目 (访问 http://ip/delayed-coking-demo 时显示)
# 请确保你已经在 html 文件夹里新建了 delayed-coking-demo 文件夹
# 并把 build 好的代码放进去了
location /delayed-coking-demo {
root html;
index index.html;
# 这里的路径必须和你的 base 保持一致
try_files $uri $uri/ /delayed-coking-demo/index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# — Server 配置结束 —
}
5 . 启动 Nginx
- 注意：双击后屏幕会闪一下黑框然后消失，这是正常的！它已经在后台运行了。
- 如果有防火墙弹窗，请点击“允许访问”。
6 . 最关键的一步 —— 阿里云安全组配置
这是新手最容易卡住的地方。即使服务器里配置好了，阿里云的外部防火墙如果不放行，外网还是进不去。
- 端口范围：输入 80/80 (或者是 HTTP 80)。
- 授权对象 (源 IP)：输入 0.0.0.0/0 (表示允许全世界访问)。
- 协议类型：TCP。
- 策略：允许。
评论前必须登录！
注册