如何使用wxPython html2加载Vue生成的dist下index.html并保障JS/CSS正常运行？

问题本质 #

Vue打包生成的dist目录中，JS、CSS等资源都是以相对路径引用的。如果直接用file:///加载单个index.html文件，wx.html2.WebView会错误地将文件所在路径之外的区域当成根路径，导致相对资源无法被正确识别，最终出现JS/CSS加载失败的问题。

解决方案 #

核心思路 #

将dist目录作为WebView的本地资源根目录，让WebView从这个根目录下解析所有相对路径的资源，这和tauri wry加载本地web资源的逻辑一致。

修正后的代码示例 #

import os
import wx
import wx.html2


class MyBrowser(wx.Frame):
    def __init__(self, *args, **kwds):
        wx.Frame.__init__(self, *args, **kwds)
        # 获取dist目录的绝对路径
        dist_dir = os.path.join(os.getcwd(), 'static', 'dist')
        dist_dir = os.path.normpath(dist_dir)
        
        # 跨平台处理file://协议路径
        if os.name == 'nt':
            # Windows下格式为file:///C:/xxx/xxx
            self.root_url = f"file:///{dist_dir.replace(os.sep, '/')}"
        else:
            # Linux/macOS下格式为file:///home/xxx/xxx
            self.root_url = f"file://{dist_dir}"
        
        self.browser = wx.html2.WebView.New(self)
        # 从dist根目录加载index.html
        self.browser.LoadURL(f"{self.root_url}/index.html")

    def on_open(self, event):
        self.browser.LoadURL(f"{self.root_url}/index.html")


if __name__ == '__main__':
    app = wx.App(False)
    frame = MyBrowser(None, wx.ID_ANY, "My Local Web App")
    frame.Show()
    app.MainLoop()

必要配置与注意事项 #

• Vue打包配置：确保Vue打包时publicPath设为相对路径，在vue.config.js中添加：

  module.exports = {
    publicPath: './'
  }
  

  这样打包后的资源引用路径会基于index.html所在目录，匹配WebView的根目录解析逻辑。
• WebView权限：默认情况下wx.html2.WebView已启用JavaScript支持，若出现异常可手动开启：self.browser.EnableJavaScript(True)。
• 路径兼容性：代码中处理了Windows与Linux/macOS的file URL格式差异，避免因系统不同导致的路径解析错误。

内容的提问来源于stack exchange，提问作者Blue My