vite 打包项目后访问显示空白页的问题

技术栈

vue 3、vite、nginx

场景

使用 yarn build 打包项目后,将生成的 dist 目录上传至服务器,然后配置 nginx 并重启后,访问项目首页,结果是一屏空白。但是查看控制台,没有任何报错,在故意输入错误的路由后,也可以展示出 404 页面(这个页面也是用组件写的)。请问这个情况如何排查和解决?

补充关键代码

  • vue 路由模式:
    //其他代码省略
    export const router = createRouter({
        history: createWebHistory(),
        routes
    })
  • vite.config.js 文件:
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    export default defineConfig({
        plugins: [vue()],
        base: './'
    })
  • nginx 配置:
    location / {
        root  /data/dist;    //这个就是我上传的 dist 目录
        index index.html;
        try_files $uri $uri/ /index.html;
    }
代码是写给人看的,顺便给机器运行一下。
本帖已被设为精华帖!
本帖由系统于 4周前 自动加精
最佳答案

谷歌了三天,99 % 的博文都在说 base 配置的有问题,不知这些博主是不是真的自己遇到了这个问题,还是人云亦云,反正我是绞尽脑汁也没想明白,最终没放弃还是自己折腾出来了。

原因是因为我的部分路由写的有问题,详细的请看下图。(我问题中提到的 404 页面可以访问到,是因为刚好这个路由我是写对了的)

把原因记录在这里,希望可以帮助遇到和我一样问题的人,不要再被网上非常扯淡的分析带偏了。

6个月前 评论
WwW1228 3个月前
讨论数量: 11

谷歌了三天,99 % 的博文都在说 base 配置的有问题,不知这些博主是不是真的自己遇到了这个问题,还是人云亦云,反正我是绞尽脑汁也没想明白,最终没放弃还是自己折腾出来了。

原因是因为我的部分路由写的有问题,详细的请看下图。(我问题中提到的 404 页面可以访问到,是因为刚好这个路由我是写对了的)

把原因记录在这里,希望可以帮助遇到和我一样问题的人,不要再被网上非常扯淡的分析带偏了。

6个月前 评论
WwW1228 3个月前

再吐槽一下,我发现 vue 这个社区一点都不活跃哇

6个月前 评论
AllenTao 6个月前
jingzhongwa 4个月前

楼主牛P ,翻了好久终于找到正解

5个月前 评论

如果还是不行,空白页面无报错无内容,那就把createWebHistory 改为createWebHashHistory

3个月前 评论
luci (楼主) 3个月前
_Josh 1个月前

我的问题解决了,是因为nginx配置中没写这句:try_files $uri $uri/ /index.html;

4周前 评论

感谢感谢

3周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!