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;
    }
代码是写给人看的,顺便给机器运行一下。
本帖已被设为精华帖!
本帖由系统于 1年前 自动加精
最佳答案

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

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

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

1年前 评论
WwW1228 1年前
dusunboy 1个月前
dusunboy 1个月前
讨论数量: 16

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

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

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

1年前 评论
WwW1228 1年前
dusunboy 1个月前
dusunboy 1个月前

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

1年前 评论
AllenTao 1年前
jingzhongwa 1年前

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

1年前 评论

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

1年前 评论
luci (楼主) 1年前
_Josh 1年前
baibukan 1年前
Delver 9个月前

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

1年前 评论

感谢感谢

1年前 评论

请问打包后页面进入显示正常,但是不能刷新,一刷新就变成空白页面,怎么解决?有没有人遇到?

2个月前 评论

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