Skip to content
On this page

前端部署

TIP

前端使用vue3开发

配置前端文件

前端文件位于client\utils\src\config.ts,修改domain为后端域名+端口,如xxx.xxx.xxx.xxx:2023,如果是本地部署可以使用localhost:2023

打包

前端分为web-client、manage-client两个项目,分别对应web端、后台管理端:

先安装依赖

# 进入client目录
cd client
# 安装依赖
pnpm i

如果没有安装pnpm,可以使用npm代替或者安装pnpm

# 安装pnpm
npm i -g pnpm

打包web-client

# 进入web-client目录
cd packages/web-client
# 打包
pnpm run build

打包manage-client

# 进入manage-client目录
cd packages/manage-client
# 打包
pnpm run build

部署

项目使用可以使用nginx部署,需要先将打包好的文件复制到nginx的html目录下,然后配置nginx nginx配置文件如下:

server {
    listen       80;
	server_name  localhost; #有域名可以把localhost替换为域名
	client_max_body_size 1024M;

    location / {
        root /usr/share/nginx/html/web;
        index index.html index.htm;
        try_files $uri $uri/ @web;
    }

    # 解决history路由问题
    location @web {
        rewrite ^.*$ /index.html;
    }

    #后台管理
    location /manage/ {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ @manage;
    }

    # 解决后台管理history路由问题
    location @manage {
        rewrite ^.*$ /manage/index.html;
    }

}

根据 AGPL-3.0 许可证发布