python PyQt5窗口运行vue项目记录

python PyQt5窗口运行vue项目记录

本文部分内容参考来源（如有侵权或不妥之处请联系修改或删除）：

1. PYQT/QT 开发VUE ELEMENT应用程序(完结)
2. Python安装Qt5及Qt Designer
3. 开源项目eladmin

一、前端项目

项目来源

本例采用开源项目ELADMIN的前端代码打包做例子。

部署方式

采用hash方式部署，要不在窗口里运行，跳转或刷新页面会找不到。
如果是用自己的项目测试，也要注意这一点，根据自身而定。

构建包

构建包（过程略），假设构建后的目录为dist_hash，结构如下

二、集成封装web项目

创建qrc文件

在打包好的前端目录下，创建qrc文件，添加每个资源文件到里面。qrc文件结构如下


如果文件很少，手动添加即可。文件多的话使用QT设计师Qt Designer协助。

使用Qt Designer添加web资源到qrc文件

Qt Designer位置

需要安装工具pip install pyqt5-tools
本人环境是在python安装目录下的Lib\site-packages\qt5_applications\Qt\bin下面

发送快捷方式到桌面，方便使用。

具体操作

1.打开designer.exe

2. 点击编辑资源

3. 新建qrc文件

4. 添加文件

按上述操作，依次添加每个目录的具体文件。

添加完后文件结构如开头所示。

5. 将qrc文件转为py文件
   命令 pyrcc5.exe src_hash.qrc -o src_hash_ui.py

三、py代码引入资源并运行

参考代码

import sys

from PyQt5.QtCore import QUrl
from PyQt5.QtWidgets import QApplication, QMainWindow
from PyQt5.QtWebEngineWidgets import QWebEngineView
import src_hash_ui  # 假设vue封装转换后的py文件在当前目录


class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.setWindowTitle("窗口1")
        self.browser = QWebEngineView()
        self.setCentralWidget(self.browser)
        self.load_vue_app()

    def load_vue_app(self):
        src_url = 'qrc:/index.html'
        self.browser.load(QUrl(src_url))


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

运行效果

窗口初始位置和大小可在代码里设置，此处不予赘述。

打包成.exe可执行文件

如有需要打包成exe文件，需要安装pyinstaller
安装 pip install pyinstaller
打包 pyinstaller -F 文件名.py
打包后的可执行文件在生成的dist目录下。

感谢阅读！希望对有缘见到此文的朋友有所帮助。