python PyQt5窗口运行vue项目记录
本文部分内容参考来源(如有侵权或不妥之处请联系修改或删除):
一、前端项目
项目来源
本例采用开源项目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. 添加文件
按上述操作,依次添加每个目录的具体文件。
添加完后文件结构如开头所示。
- 将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目录下。
感谢阅读!希望对有缘见到此文的朋友有所帮助。