# desktop-formwork

**Repository Path**: cxword/desktop-formwork

## Basic Information

- **Project Name**: desktop-formwork
- **Description**: 使用python中的fastapi，pywebview，pyinstaller，前端用vue技术，来开发桌面版的应用。
- **Primary Language**: Python
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-11-02
- **Last Updated**: 2025-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# desktop-formwork

#### 介绍
使用python中的fastapi，pywebview，pyinstaller，前端用vue技术，来开发桌面版的应用。

### 项目python的依赖

- fastapi==0.115.12
- pydantic==2.11.5
- loguru==0.7.3
- python-dotenv==1.1.0
- pywebview==5.3.2
- uvicorn==0.34.3
- pyinstaller==6.11.1

#### 软件架构
PyWebView + FastAPI + Vue3 + TailwindCSS 前后端一体化的轻量级桌面应用开发的解决方案。

后端主要依赖于fastapi框架，用uvicorn启动后端项目，做API的服务，来为前端功能提供功能接口。

前端是基于 Vue3 + TailwindCSS 来做界面的开发，然后用pywebview组件，将前端功能呈现出来。

最后，用pyinstaller将前后端的代码打包为一个可运行的Windows的软件。

#### 结构说明


#### 安装教程

1.  从服务器下载该基础框架的代码
2.  创建一个专用的python虚拟环境（方便后期打包）
3.  用NPM脚本，运行环境初始化: npm run init 命令，该命令将初始化安装后端的python的依赖，以及前端项目中的相关组件的依赖，过程可能会有点长，需要等待一段时间



#### 使用说明

1.  初始化：npm run init
2.  开发调试：npm run dev
3.  编译：npm run build 
4.  预编译：npm run pre_build (编译后启动时会有日志输出窗口，方便查看日志)
5.  项目清理：npm run clean (慎重使用，清理后需要再次初始化环境)


### 关键配置文件

1.  系统基本配置文件app-config.json 
```
{
  "app": {
    "name": "一体化桌面应用",
    "version": "1.0.0",
    "window": {
      "title": "一体化桌面应用",
      "width": 1024,
      "height": 800,
      "minSize": [
        1024,
        800
      ],
      "resizable": true,
      "text_select": true,
      "easy_drag": true,
      "debug": false
    },
    "build": {
      "name": "DeskApp",
      "icon": "logo.ico"
    }
  }
}
```

2.  前端开发和发布环境的配置，开发环境配置文件 .env.development

```
DEV_MODE=dev
```

发布环境配置文件  .env.production

```
DEV_MODE=prod
```

前端api中会使用到环境信息，主要在request.js中，会根据环境来选择后端接口的请求地址， 具体代码如下：

```
const getBaseURL = () => {
  if (import.meta.env.DEV) {
    return 'http://localhost:8001';
  } else {
    return window.location.origin; 
  }
};
```

前端项目中的 router.js 中的关键信息base的配置：

```
const routes = [
  { path: '/', component: HomeView }
];

// 生产环境(production)使用 '/app/' 作为基路径，开发环境（development）使用根路径 '/'
const base = import.meta.env.MODE === 'production' ? '/app/' : '/';
const router = createRouter({
  history: createWebHistory(base),  // base 添加history之中
  routes
});
```

3.  后端配置，关于开发和发布环境的值，都在 .env 文件中，具体：

```
ENV=production  
```

或者
```
ENV=development  
```

备注：运行npm run dev 后，会被修改为 development，运行 npm run build 或者 npm run pre_build 会被自动修改为 production

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)