解决 Vue3 + Vite 打包部署空白页

最近在部署 Vue3 项目时遇到了部署完成但是无法正常访问的问题。

整理一下逻辑，部署到宝塔后，首先根目录是可以正常访问的，但是将文件放在类似于 /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！