找回密码
 立即注册
首页 业界区 安全 vue2打包部署到nginx,解决路由history模式下页面空白问 ...

vue2打包部署到nginx,解决路由history模式下页面空白问题

院儿饯 2025-6-1 20:57:58
项目使用的是vue2,脚手架vue-cli 4。
需求:之前项目路由使用的是hash,现在要求调整为history模式,但是整个过程非常坎坷,遇到了页面空白问题。现在就具体讲一下这个问题。
首先,直接讲路由模式由hash改为了history。
1.png

在vue.config.js中的配置
2.png

然后直接进行打包。
nginx的配置:
3.png

此时,启动nginx,访问项目http://localhost:8000/。因为我在项目的路由中配置了重定向,所以重定向到了jTlist页面。
4.png

此时,又来了一个新的需求!需有增加一个路由前缀,不能够直接访问/。
于是,我在增加了如下路由配置:
5.png

其他位置及nginx未做改动。
重新打包。
然后访问http://localhost:8000/aichat,成功访问,并成功重定向到/jTlist。
6.png

此时,问题来了!!点击刷新。
7.png

页面空白,控制台出现了两个错误。
点开错误信息,看了一下,提示We're sorry but xx doesn't work properly without JavaScript enabled. Please enable it to continue.
个人理解的意思是好像什么js未加载进来。于是,我点开Network,看一下对js文件的请求是否有问题。
8.png

找到了问题所在,
它本应访问的路径是http://localhost:8000/aichat/static/js/chunk-vendors.21d24282.js,结果访问了http://localhost:8000/aichat/aichat/static/js/chunk-vendors.21d24282.js。
该问题困扰了很长时间,结果看到了一位大佬的文章。
参考文章:https://blog.csdn.net/weixin_42644340/article/details/119654050#:~:text=不带"#"既是his
在vue.config.js中进行修改:
9.png

修改后重新打包。
成功访问,刷新后页面正常,问题成功解决。
注意:js找不到,还可能存在的问题是,入口文件index.html中通过script引入的文件,使用相对路径或其他,可能导致加载不到。
有任何问题,欢迎来问,一起探讨~~

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册