Iris 搭载Vue history 路由模式 SPA

Iris 搭载Vue history 路由模式 SPA

本文意在解决SPA History 路由模式导致的前端路由页面刷新后端报404的错误,以及前端项目资源如何打包进可执行的二进制文件中。

所需环境

  • Golang
  • cobar 用于快速开发命令行的包
  • Iris Golang Web 框架
  • go-bindata
  • vue/cli 3.x

创建项目

创建项目目录
1
mkdir $GOPATH/src/project && cd $GOPATH/src/project
安装 cobra
1
go get -u github.com/spf13/cobra/cobra
初始化项目
1
cobar init

此时目录结构如下:

1
2
3
4
5
.
├── LICENSE
├── cmd
│ └── root.go
└── main.go

如果你使用了module,需要执行如下命令:

1
go mod init

创建命令

1
cobra add web

执行后将会在cmd目录下创建一个web.go的文件。

创建SPA

1
2
3
npm install -g @vue/cli 或 yarn global add @vue/cli
vue create web
cd web

此时目录机构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.
├── LICENSE
├── cmd
│ ├── root.go
│ └── web.go
├── go.mod
├── go.sum
├── main.go
└── web
├── README.md
├── babel.config.js
├── dist
├── node_modules
├── package.json
├── public
├── src
└── yarn.lock

添加项目依赖

1
2
3
vue add router
vue add vuex
yarn build

当执行yarn build后,将会在web目录下生成dist目录

将静态资源打包成二进制

1
2
3
go get -u github.com/shuLhan/go-bindata/...
go-bindata -pkg web -o web/bindata.go web/dist/...
go build

编辑 web.go

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
package cmd

import (
"fmt"
"github.com/kataras/iris"
"github.com/kataras/iris/middleware/logger"
"github.com/kataras/iris/middleware/recover"
"github.com/spf13/cobra"
"log"
"project/web"
)

var (
host string
port int
)

// webCmd represents the web command
var webCmd = &cobra.Command{
Use: "web",
Short: "Start a web service",
Long: `Start a web service`,
Run: func(cmd *cobra.Command, args []string) {
server := iris.New()

server.Use(iris.Gzip)
server.Use(recover.New())
server.Use(logger.New())

// SPA 路由刷新404 处理
server.OnErrorCode(404, func(ctx iris.Context) {
ctx.StatusCode(200)
if err := ctx.View("index.html"); err != nil {
log.Println(err)
}
})

server.RegisterView(iris.HTML("./web/dist", ".html").Binary(web.Asset, web.AssetNames))

// 页面路由
server.Get("/", func(ctx iris.Context) {
if err := ctx.View("index.html"); err != nil {
log.Println(err)
}
})

assetHandler := iris.StaticEmbeddedHandler("./web/dist", web.Asset, web.AssetNames, false)
server.SPA(assetHandler).AddIndexName("index.html")

addr := fmt.Sprintf("%s:%d", host, port)
if err := server.Run(iris.Addr(addr), iris.WithoutInterruptHandler); err != nil {
log.Println(err)
}
},
}

func init() {
rootCmd.AddCommand(webCmd)
webCmd.PersistentFlags().StringVar(&host, "host", "0.0.0.0", "Set listen on IP")
webCmd.PersistentFlags().IntVar(&port, "port", 7368, "Set listen on port")
}

编译 Go 项目

1
2
3
4
go build -o spa main.go
./spa web --host localhost --port 8080
Now listening on: http://localhost:8080
Application started. Press CMD+C to shut down.

打开浏览器访问 http://localhost:8080,这样就不用担心在Vue的路由页面刷行会导致404报错了!

效果图

# Go, Iris, SPA, Vue

评论