部署到宝塔后，首先根目录是可以正常访问的，但是将文件放在类似于 /about 这样的子目录就会白屏，首先考虑了一下是静态文件的路径出错了，检查了一下，默认是指向 / 而不是 ./，导致路径出错。
打开工程根目录下的 vite.config.ts，那就修改一下默认的 base：
1
2
3
4
5
| export default defineConfig({
...,
base: './',
...
})
|
问题解决了，但页面依然是空白的……
那接着考虑一下是否是 Vue Router 有没有配置错误，目前使用的是 history 模式，可能是由于宝塔这边的 nginx 没有做相应的配置所导致的白屏，那就修改为 hash 模式。
修改 router/index.ts，将 createWebHistory 修改为 createWebHashHistory：
1
2
3
4
5
| const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
|
重新部署一下，问题解决 (￣︶￣*))，多了丑陋的 #，但不用另外配置 nginx！