vue3环境搭建与部署

vue3环境搭建

安装node.js

需要安装18.3或更高版本的 Node.js windows安装：https://nodejs.cn/download/ debian 安装：sudo apt install nodejs npm(仅尝试) 检查安装：node -v

创建一个 Vue 应用

vite + vue3 + typescript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

运行：npm run dev

vue3+golang部署样例

以 gin-vue-admin为例

前后端分离

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 克隆项目
git clone https://github.com/flipped-aurora/gin-vue-admin.git

# server项目:

## 进入server文件夹
cd server

## 使用 go mod 并安装go依赖包
go generate

## 运行
go run . 

# web项目:
## 进入web文件夹
cd web

## 安装依赖
npm install

## 启动web项目
npm run serve

非nginx部署代理(gin)

在gin-vue-admin\server\initialize\router.go文件中按照文件中的注释配置。

1
2
3
4
5
6
7
// 如果想要不使用nginx代理前端网页，可以修改 web/.env.production 下的
// VUE_APP_BASE_API = /
// VUE_APP_BASE_PATH = http://localhost
// 然后执行打包命令 npm run build。再打开下面3行注释，将编译好的dist目录下的文件复制到server目录下
// Router.StaticFile("/favicon.ico", "./dist/favicon.ico")
// Router.Static("/assets", "./dist/assets") // dist里面的静态资源
// Router.StaticFile("/", "./dist/index.html") // 前端网页入口页面

如果运行后static找不到文件，则：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# 注释
// Router.StaticFile("/", "./dist/index.html") // 前端网页入口页面
# 添加
Router.NoRoute(func(c *gin.Context) {
		data, err := os.ReadFile("./dist/index.html")
		if err != nil {
			c.AbortWithError(http.StatusInternalServerError, err)
			return
		}
		c.Data(http.StatusOK, "text/html; charset=utf-8", data)
	})

使用embed嵌入资源文件

gin+vue

请访问：go embed 实现gin + vue静态资源嵌入如果将dist目录放到public目录下：

  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
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
# server/public.go
package public

import (
	"embed"
)

//go:embed dist
var StaticFile embed.FS
# server\initialize\router.go
// Router.StaticFile("/favicon.ico", "./dist/favicon.ico")
// Router.Static("/assets", "./dist/assets") // dist里面的静态资源
// Router.StaticFile("/", "./dist/index.html") // 前端网页入口页面
Router.Use(Serve("/", EmbedFolder(public.StaticFile, "dist")))
	Router.NoRoute(func(c *gin.Context) {
		data, err := public.StaticFile.ReadFile("dist/index.html")
		if err != nil {
			c.AbortWithError(http.StatusInternalServerError, err)
			return
		}
		c.Data(http.StatusOK, "text/html; charset=utf-8", data)
	})
# 其他未修改直接复制博客内函数即可
const INDEX = "index.html"

type ServeFileSystem interface {
	http.FileSystem
	Exists(prefix string, path string) bool
}

type localFileSystem struct {
	http.FileSystem
	root    string
	indexes bool
}

func LocalFile(root string, indexes bool) *localFileSystem {
	return &localFileSystem{
		FileSystem: gin.Dir(root, indexes),
		root:       root,
		indexes:    indexes,
	}
}

func (l *localFileSystem) Exists(prefix string, filepath string) bool {
	if p := strings.TrimPrefix(filepath, prefix); len(p) < len(filepath) {
		name := path.Join(l.root, p)
		stats, err := os.Stat(name)
		if err != nil {
			return false
		}
		if stats.IsDir() {
			if !l.indexes {
				index := path.Join(name, INDEX)
				_, err := os.Stat(index)
				if err != nil {
					return false
				}
			}
		}
		return true
	}
	return false
}

func ServeRoot(urlPrefix, root string) gin.HandlerFunc {
	return Serve(urlPrefix, LocalFile(root, false))
}

// Static returns a middleware handler that serves static files in the given directory.
func Serve(urlPrefix string, fs ServeFileSystem) gin.HandlerFunc {
	fileserver := http.FileServer(fs)
	if urlPrefix != "" {
		fileserver = http.StripPrefix(urlPrefix, fileserver)
	}
	return func(c *gin.Context) {
		if fs.Exists(urlPrefix, c.Request.URL.Path) {
			fileserver.ServeHTTP(c.Writer, c.Request)
			c.Abort()
		}
	}
}

type embedFileSystem struct {
	http.FileSystem
}

func (e embedFileSystem) Exists(prefix string, path string) bool {
	_, err := e.Open(path)
	if err != nil {
		return false
	}
	return true
}

func EmbedFolder(fsEmbed embed.FS, targetPath string) ServeFileSystem {
	fsys, err := fs.Sub(fsEmbed, targetPath)
	if err != nil {
		panic(err)
	}
	return embedFileSystem{
		FileSystem: http.FS(fsys),
	}
}