webview

Appearance

嵌入 Vue 工程 ​

把 Vue 3 + Vite 工程的 build 产物嵌入 webview exe，前端 window.bridge 调 C++。以 Vue 3 + Vite 为例。

1. Vite 配置 ​

vite.config.ts：base: './'（适配 app.local 相对路径），输出到约定目录。

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  root: resolve(__dirname, 'src/renderer'),
  base: './',
  resolve: {
    alias: { '@': resolve(__dirname, 'src/renderer/src') }
  },
  build: {
    outDir: resolve(__dirname, '../src/assets/html'),
    emptyOutDir: true
  }
})

2. 封装 bridge ​

渲染层契约封装一层，所有调用走 window.bridge.call：

ts
// src/renderer/src/api/bridge.ts
declare global {
  interface Window { bridge: any }
}

export async function call<T>(name: string, ...args: any[]): Promise<T> {
  return window.bridge.call(name, ...args)
}

export function on(name: string, fn: (...args: any[]) => any) {
  window.bridge.on(name, fn)
}

业务调用：

ts
import { call, on } from '@/api/bridge'

const list = await call<Project[]>('getProjectList')
on('useProjectCb', (p: Project) => store.set(p))

3. 构建 + 打包 ​

bash
# 前端 build → src/assets/html/
npm run build

# C++ 构建把资源嵌入 exe
cmake -B build -G "Visual Studio 17 2022" -A x64
cmake --build build --config Release

opts.url 指约定目录：

cpp
opts.url = L"src/assets/html/index.html";

4. 前端 rebuild 后重打包 ​

WARNING

前端改代码 npm run build 后，必须再 cmake --build（或 cmake -B build 重 configure）把新资源嵌入 exe，否则 exe 里还是旧资源。

5. 可选：.7z 压缩 ​

Vue dist 含大量 minified JS（antd/element 等组件库），LZMA2 压比高。启用：

cpp
.compression(webview::Compression::Max)

需先 pip install -r tools/requirements.txt（py7zr）。详见 .7z 资源压缩。

目录结构 ​

myapp/
  CMakeLists.txt / cmake.toml
  src/
    main.cpp                  # C++ 主程序 + RPC 槽
    assets/html/              # Vue build 产物（约定目录）
      index.html
      assets/
  web/                        # Vue 源码工程（build 输出到 ../src/assets/html）
    src/renderer/
    vite.config.ts
    package.json

下一步 ​