2025-07-17 03:58:59 +00:00
|
|
|
|
# 开始前端程序开发
|
|
|
|
|
|
|
|
|
|
|
|
## 预览应用
|
2025-09-10 13:01:31 +00:00
|
|
|
|
应用安装完成后，可以通过 Studio 的**预览**按钮，预览应用的前端效果。
|
2025-07-17 03:58:59 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 打开 IDE
|
|
|
|
|
|
|
|
|
|
|
|
打开前端的开发容器 IDE, 可以看见开发容器的预览欢迎页。之后的开发流程与[开发后端](backend.md)类似，在 Terminal 中克隆你的前端代码。
|
|
|
|
|
|
|
|
|
|
|
|
::: tip
|
|
|
|
|
|
在本教程中，因为前后端共开发容器共享了代码目录，后端 clone 代码后，前端不需要再次克隆代码。
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
克隆完代码后，如果是 Node 项目，可能需要做配置修改。
|
|
|
|
|
|
|
|
|
|
|
|
- **Vite 配置修改**
|
|
|
|
|
|
|
|
|
|
|
|
如果前端项目采用了 vite，需要增加 hmr 配置。Vite 在 dev 状态，会启动 websocket 监听服务器端发送的代码更新 reload 通知。默认 ws 端口为 server 启动的端口。而 dev app 启动了 nginx 代理，采用了标准的 443 端口。所以需要做相应修改。
|
|
|
|
|
|
|
|
|
|
|
|
按以下方式修改 vite.config.js 文件：
|
|
|
|
|
|
```js
|
|
|
|
|
|
export default defineConfig({
|
|
|
|
|
|
server: {
|
|
|
|
|
|
hmr: {
|
|
|
|
|
|
clientPort: 443,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
```
|
|
|
|
|
|
- **Nginx 配置修改**
|
|
|
|
|
|
|
|
|
|
|
|
配置好项目的开发环境后，需要修改 Nginx 配置。打开 `/etc/nginx/conf.d/dev/dev.conf` 修改：
|
|
|
|
|
|
|
|
|
|
|
|
```nginx
|
|
|
|
|
|
location / {
|
|
|
|
|
|
proxy_pass http://127.0.0.1:9000;
|
|
|
|
|
|
proxy_set_header Host $http_host;
|
|
|
|
|
|
proxy_set_header X-real-ip $remote_addr;
|
|
|
|
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
|
|
|
|
proxy_http_version 1.1;
|
|
|
|
|
|
proxy_set_header Upgrade $http_upgrade;
|
|
|
|
|
|
proxy_set_header Connection $http_connection;
|
|
|
|
|
|
proxy_set_header Accept-Encoding gzip;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
然后重启 Nginx：
|
|
|
|
|
|
```sh
|
|
|
|
|
|
nginx -s reload
|
|
|
|
|
|
```
|
|
|
|
|
|
## 运行开发模式
|
|
|
|
|
|
完成 Nginx 配置后，你就可以启动你的前端程序的开发模式，并在 Olares 中预览你的应用：
|
|
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
|
|
npm run dev
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
如果你需要为前端设置后端 API 代理，可以在 Nginx 中修改代理配置
|
|
|
|
|
|
|
|
|
|
|
|
```nginx
|
|
|
|
|
|
location /api/ {
|
|
|
|
|
|
proxy_pass http://127.0.0.1:9001;
|
|
|
|
|
|
proxy_set_header Host $http_host;
|
|
|
|
|
|
proxy_set_header X-real-ip $remote_addr;
|
|
|
|
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
|
|
|
|
proxy_http_version 1.1;
|
|
|
|
|
|
proxy_set_header Upgrade $http_upgrade;
|
|
|
|
|
|
proxy_set_header Connection $http_connection;
|
|
|
|
|
|
proxy_set_header Accept-Encoding gzip;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
