如何把 vue 網頁應用編譯進 Go語言建立網頁服務

前言介紹

在開始前...

我們要先了解 embed 這個工具能帶給我們什麼，我們先實做一個簡單的專案先用指令建立一個 go module

go mod test-embed

然後再專案資料夾建立一個檔案 `sample.txt` 內容長這樣的

hello embedding

這時我們可以撰寫我們的 `main.go`

package main



import (

 _ "embed"

 "fmt"

)



//go:embed sample.txt

var app string



func main() {

 fmt.Println(app)

}

這樣我們可以讀取到 sample.txt 的內文並且顯示在 command line 上，這樣很簡單對吧，並且在編譯後刪除 sample.txt 執行結果不受影響，原因其實很簡單，因為 sample.txt 皆編譯進入 go binary code 內了

go run main.go

以及編譯結果

hello embedding

接下來我們把它 build 出來

go build -o app && ./app

接下來我們開始我們正式的實作

首先我們先建立 golang 專案並建立 go module

go mod init cool-embedding-project

在專案資料夾內建立我們 vue 的前端內容

pnpm create vite --template vue-ts web

這時，我們的專案資料夾內容會長這樣

.

├── go.mod

├── main.go

└── web

    ├── README.md

    ├── index.html

    ├── package.json

    ├── public

    │   └── vite.svg

    ├── src

    │   ├── App.vue

    │   ├── assets

    │   │   └── vue.svg

    │   ├── components

    │   │   └── HelloWorld.vue

    │   ├── main.ts

    │   ├── style.css

    │   └── vite-env.d.ts

    ├── tsconfig.json

    ├── tsconfig.node.json

    └── vite.config.ts

然後我們到 web 的資料夾內進行前端該有的安裝和編譯

pnpm install && pnpm build

然後我們會產出一個 dist 的資料夾，那是前端編譯出來的 html,js,css結果

接著我們可以開始處理我們的主程式了

package main



import (

 "embed"

 "io/fs"

 "log"

 "net/http"

)



//go:embed testwow/dist

var app embed.FS



func main() {

 dist, err := fs.Sub(app, "web/dist")

 if err != nil {

  log.Fatalf("sub error")

 return

 }

 http.Handle("/", http.FileServer(http.FS(dist)))

 log.Fatal(http.ListenAndServe(":8080", nil))

}

好了，我們完成了，我們使用 go 提供的 net/http 包去監聽 8080 port，並且我們利用 io/fs 提供的方法去抓取 embed 內的資料，去起一個網頁服務

go run main.go

這時我們會在 http://localhost:8080 看到我們的 vue 畫面了 是時候把他編譯成二進制 code

go build -o app && ./app

由於我們已經打包完成，所以即使我們把 web 資料夾內容刪除，執行

./app

也不會影響到我們的結果，我們成功把 vue 的前端內容編進去我們的 Go語言應用了。

感謝觀看。 如果想要知道更詳細的內容，可以參考我的 medium 文章 順便追蹤我的 medium