f946e9dd
 hexiaodong
hhh
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
# 前端部署到宝塔指南
## 构建产物位置
构建后的静态文件位于：`douyin/frontend/dist/` 目录
包含以下文件：
- `index.html` - 入口文件
- `assets/` - 静态资源（CSS、JS）
- `favicon.ico` - 网站图标
## 宝塔部署步骤
### 1. 准备工作
1. 登录宝塔面板
2. 确保已创建网站（如果没有，请先创建）
### 2. 上传文件
有两种方式：
#### 方式一：通过宝塔文件管理器
1. 进入宝塔面板 → 文件
2. 找到网站根目录（通常是 `/www/wwwroot/你的域名/`）
3. 删除或备份旧文件
4. 上传 `dist` 目录中的所有文件到网站根目录
#### 方式二：通过FTP/SFTP
1. 使用FTP工具（如FileZilla）连接到服务器
2. 进入网站根目录
3. 上传 `dist` 目录中的所有文件
### 3. 配置Nginx（如果使用）
如果需要配置反向代理到后端API，编辑Nginx配置：
```nginx
server {
listen 80;
server_name 你的域名;
root /www/wwwroot/你的域名;
index index.html;
# 前端路由配置（Vue Router使用history模式）
location / {
try_files $uri $uri/ /index.html;
}
# 后端API代理（根据实际情况修改）
location /api {
proxy_pass http://localhost:5070/api; # 后端服务地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
```
### 4. 环境变量配置
如果前端使用了环境变量，需要在宝塔中配置：
1. 进入宝塔面板 → 网站 → 设置 → 配置文件
2. 添加环境变量（如果需要）：
```nginx
# 在server块中添加
env VITE_API_BASE_URL;
```
或者在前端代码中，如果使用相对路径 `/api`，则会自动使用当前域名。
### 5. 设置文件权限
1. 进入宝塔面板 → 文件
2. 选中网站根目录
3. 右键 → 权限
4. 设置权限为 755（目录）和 644（文件）
5. 所有者设置为 www（或你的Web服务器用户）
### 6. 重启服务
1. 如果修改了Nginx配置，点击宝塔面板 → 软件商店 → Nginx → 设置 → 重载配置
2. 或者重启Nginx服务
### 7. 访问测试
在浏览器中访问你的域名，检查前端是否正常加载。
## 注意事项
1. **后端API地址**：确保前端配置的后端API地址正确，通常有两种方式：
- 使用相对路径 `/api`（推荐，会自动使用当前域名）
- 使用完整URL，需要根据实际部署环境修改
2. **跨域问题**：如果前后端不在同一域名，需要在后端配置CORS，或者在Nginx中配置代理
3. **HTTPS**：如果使用HTTPS，需要在宝塔中配置SSL证书
4. **缓存问题**：部署后如果看不到最新内容，可能需要清除浏览器缓存
## 更新部署
更新时，只需：
1. 重新执行 `npm run build`
2. 删除服务器上旧的 `dist` 目录内容
3. 上传新的构建产物
4. 清除浏览器缓存（或强制刷新：Ctrl+F5）
## 当前构建信息
- 构建时间：$(date)
- Node.js版本：v20.19.6
- 构建工具：Vite 7.2.2
- 框架：Vue 3
|
