对于所有大前端程序员来说，写个桌面小工具的冲动可能很难抑制，有时想到一些有趣的想法，纵使不能改变世界，也能方便自己嘛。~~虽然大多数人只是再次发明TODO、记账、笔记应用，发到V2EX分享创造结点。~~

Compose Desktop写起来没有想象的那么舒服，打包起来更是不爽。MAUI不支持Linux，Electron打包体积太大，Tauri要学Rust太难，折腾一番，我发现Golang + Vue能满足我的要求。Vue广泛用于前端，Golang写后端也很方便，那么只需要一个Webview就可以像一个桌面应用一样工作了。

搭建项目

首先创建一个vue项目，

pnpm create vue@latest
cd some-project
pnpm init

修改App.vue，在打开后请求后端接口更新数据：

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import { onMounted, ref } from 'vue'

const message = ref("Hello World from vue!")

onMounted(() => {
  fetch("/api/example").then((response) => {
    response.text().then((t) => {
      message.value = t
    })
  })
})

</script>

<template>
  <header>
    <div class="wrapper">
      <HelloWorld :msg="message" />
    </div>
  </header>
  ...
</template>

再在同一个文件夹创建Golang项目

go mod init some-project
go get github.com/webview/webview_go

接下来创建main.go，编写代码。

package main

import (
	"embed"
	"fmt"
	"io/fs"
	"net"
	"net/http"
	"strconv"

	webview "github.com/webview/webview_go"
)

//go:embed dist
var distFS embed.FS

func someApi(response http.ResponseWriter, request *http.Request) {
	fmt.Fprintf(response, "Hello World from golang!")
}

func main() {
	fSys, err := fs.Sub(distFS, "dist")
	if err != nil {
		panic(err)
	}
	http.Handle("/", http.FileServer(http.FS(fSys))) // 嵌入vue的导出文件
	http.HandleFunc("/api/example", someApi) // 定义一些API供前端访问

	listener, err := net.Listen("tcp", "localhost:0") // 监听随机端口
	if err != nil {
		panic(err)
	}
	port := listener.Addr().(*net.TCPAddr).Port
	go http.Serve(listener, nil)

    // 启动一个带Webview的窗口，并打开Vue的起始页
	w := webview.New(false)
	defer w.Destroy()
	w.SetTitle("Basic Example")
	w.SetSize(1000, 618, webview.HintNone)
	w.Navigate("http://localhost:" + strconv.Itoa(port))
	w.Run()
}

打包

先打包Vue再打包Golang，整体还是很简单的。

pnpm build
mkdir build
cd build
go build ..

使用golang和Vue创建桌面工具

在我的Debian 12上上述Hello World打包体积为6.7M。

总结

使用Vue开发前端而golang开发后端，上手难度低打包体积小，还能跨平台，写个小工具还是很适用的。喵的是，Golang和Vue用VSCode开发都很方便，你甚至不用打开两个IDE窗口。不过Webview项目目前并不是太成熟，提供的API也很少，如果要对窗口进行一些定制几乎是完全做不到的。

最后修改于 2024-04-05