当前位置：首页 > news >正文

vue项目使用vite和vue-router实现history路由模式空白页以及404问题

news 来源：原创 2025/5/14 3:12:47

开发项目的时候，我们一般都会使用路由，但是使用hash路由还是history路由成为了两种选择，因为hash路由在url中带有#号，history没有带#号，看起来更加自然美观。但是hash速度更快而且更通用，history需要配置很多地方，浏览器兼容性也不是很好。但是领导要求要不带#号的history模式，那就只能满足他了。而且还需要在子路径下面开发和部署，所以就需要配置vite的base: '/h5',但是很奇怪的是配置了之后，本地打开竟然是一个空白页面，啥都没有啊，而且也没有报错！！！！什么报错都没有啊啊啊啊啊啊

这就搞笑了，没有报错怎么找问题？

但是使用createWebHashHistory模式就可以了：

所以怀疑还是路由这里出现问题了！

果然啊啊啊啊啊啊啊啊啊

这个路由createWebHistory模式就有一个隐藏的参数啊啊啊啊：

如果你的base地址配置为子路径或者啥的，就需要也在 createWebHistory中添加参数：

然后本地再次打开，就可以了：

部署到服务端

然后就是打包部署到服务端看看了，将项目部署到www目录下面的h5文件夹下：

然后需要配置nginx：注意root配置为/var/www/就可以了，不要加h5

然后nginx测试配置和重新加载配置：

nginx -tsudo nginx -s reload

这个时候访问首页是ok的：

但是子页面就404了。。。。。。。。。

解决部署404问题

如果直接访问子页面（如 /h5/about），服务器会尝试查找 /var/www/h5/about 文件或目录，但实际 Vue 应用是一个单页应用（SPA），只有一个入口文件 index.html。由于服务器找不到对应的文件或目录，因此返回 404 错误。

解决方法

需要在 Nginx 配置中添加一个规则，将所有非静态资源的请求重定向到 index.html，由 Vue Router 处理路由。

修改 Nginx 配置，将以下配置添加到你的 Nginx 配置中：

location /h5 {root /var/www/;index index.html index.htm;try_files $uri $uri/ /h5/index.html;
}

解释：

root /var/www/;：指定根目录为 /var/www/，因此 /h5 对应的物理路径是 /var/www/h5。

index index.html index.htm;：指定默认的索引文件。

try_files $uri $uri/ /h5/index.html;：

首先尝试访问请求的文件（如 /h5/about）。

如果文件不存在，尝试访问目录（如 /h5/about/）。

如果仍然不存在，则将请求重定向到 /h5/index.html，由 Vue Router 处理路由。

然后nginx测试配置和重新加载配置：

nginx -tsudo nginx -s reload

确保 Vue 项目的 base 配置正确

在 vite.config.js 中，确保 base 设置为 /h5/：

在 Vue Router 中，确保 history 的 base 也设置为 /h5/：

重启nginx之后，就可以访问子页面了：

部署到服务端

解决部署404问题

相关文章：