> For the complete documentation index, see [llms.txt](https://505876833.gitbook.io/gao-jin-yun-xin-xin-yong-chi-v1.0/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://505876833.gitbook.io/gao-jin-yun-xin-xin-yong-chi-v1.0/ping-tai-bu-shu/qian-duan.md).

# 前端

### 环境需要

```
// 页面托管服务器 Nginx
sudo apt-get install nginx
nginx -v
service nginx start
```

### 环境配置

注意修改前端从后端获取数据的访问地址（与后端相对应），在 components 文件下。

```
// 例如 BankGrant.jsx 下的
axios.get(http://10.201.1.239:5000/grant/q...)
```

### 编译前端

```
cd client
npm install
npm run build
```

### 部署前端

<pre><code>//部署文档可参考：https://blog.csdn.net/single_0910/article/details/121079251
<strong>server {
</strong>          listen        8888;
          server_name   GJYX;
          location / {
            root  /home/chain1/桌面/cpd/GJYX/html/dist; // 编译文件存放位置，该行注释部署时需要删除
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
          }
          location ~ .*\.(gif|jpg|jpeg|png|bmp|svg)$ {
            access_log off;
            root /home/chain1/桌面/cpd/GJYX/html/dist; // 编译文件存放位置，该行注释部署时需要删除
            expires 30d;
            break;
          }
        }

</code></pre>

修改好Nginx的配置后，需要重新启动

```
// 重新启动命令
sudo systemctl reload nginx
// 启动命令
sudo systemctl start nginx
```

{% hint style="info" %}
若出现图片加载异常，需手动将图片等媒体文件移动到 media 文件夹（需要新建）中。

一定要注意路径的正确性，否则会部署失败，页面无显示。
{% endhint %}