前言

上一篇文章讲了如何解决 Gin 中嵌入资源的问题，虽然也解决了，但是还是碰到了问题。

发现问题

在 Gin 中了为了区分 API 和 web，通常会指定不同的路由，以便区分。

1
2
3
4
5
6
7
8

//go:embed dist
var f embed.FS

router := gin.Default()
fp, _ := fs.Sub(f, "dist")
router.StaticFS("/static", http.FS(fp))

api := router.Group("/api")

当我把 web 文件指定到 /static 下，然后通过浏览器访问，发现访问 index.html 可以成功加载。

然而获取 css 和 js 文件都报 404 了。

但是把路由换到 / 又能正常访问。

为了查明问题，我就打开了 index.html 的源码，发现了 CSS 和 JS 是用的绝对路径，所以导致加了 static 找不到文件。

1
2

<script type="module" crossorigin src="/assets/index.b90a234a.js"></script>
<link rel="stylesheet" href="/assets/index.49bb9456.css">

使用相对路径

知道了问题就好办了，只要把绝对路径改成相对路径就行了。

于是问题就变成了 Vue 如何使用相对路径，搜索一圈下来发现只需要修改 vite.config.ts ，把 base 改为 ./ ，如果没有 base 新增即可。

1
2
3

export default defineConfig({
    base: './',
})

然后重新生成，再看下 index.html

1
2

<script type="module" crossorigin src="./assets/index.b90a234a.js"></script>
<link rel="stylesheet" href="./assets/index.49bb9456.css">

这时候 CSS 和 JS 就变成相对路径了，这样也就能正常加载了。