最近很火的 Gin 框架，是一款基于 Golang 的輕量級 Web 框架。它的優秀的性能和易用性，使得它深受開發者的喜愛。而 Vue.js 作為一款流行的前端框架，許多開發者會使用到它來構建自己的前端應用。在實際開發中，我們很有可能需要使用 Gin 渲染 Vue.js，并把渲染后的頁面呈現給用戶。下面我們來講一下如何使用 Gin 渲染 Vue.js。

首先，我們需要先將 Vue.js 的代碼放置在 Gin 的靜態文件夾下。比如，我們將 Vue.js 的所有文件都放在了 Gin 項目的靜態資源目錄 static 中，如圖所示：

- project
|- main.go
|- static
|- js
|- app.js
|- css
|- app.css
|- index.html

接下來，在 Gin 中你需要添加一個路由，來指定 Vue.js 要渲染的頁面。我們先來看一下代碼：

// 新建一個靜態路由
r.Static("/static", "./static")
// 添加一個路由，指定要渲染的文件
r.GET("/", func(c *gin.Context) {
c.HTML(http.StatusOK, "index.html", nil)
})

在這里，我們使用了 r.Static 方法來指定了 Gin 項目的靜態資源目錄為 static。而 r.GET 方法則是用來添加路由的。當訪問根路徑時，它返回了 index.html 這個文件，并使用了 Gin 自帶的 HTML 渲染引擎，將頁面渲染出來。

最后，我們需要在 Vue.js 中修改一下，將它的請求路徑指向我們剛剛創建的路由。如下：

new Vue({
el: '#app',
delimiters: ['[[', ']]'],
router,
template: '',
components: { App },
// 修改請求路徑
data() {
return {
apiPath: '/api'
}
},
})

到這里，我們就將 Gin 和 Vue.js 結合渲染成功了。運行 Gin 項目，訪問首頁，就會看到 Vue.js 注入到頁面中的效果。希望本文對您有所幫助。