ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue项目，页面刷新就404了 [打印本页]

作者: 去皮卡多 时间: 2024-9-28 16:43
标题: vue项目，页面刷新就404了
在 Vue.js 项目中，如果使用了 vue-router 而且路由模式设置为 history 模式，那么在刷新页面或直接访问某个路由时，可能会遇到 404 错误。这是因为 history 模式下，前端路由的路径并不匹配服务器上的实际路径，导致服务器无法找到对应的资源。
解决方案

要解决这个问题，需要在服务器设置中将所有请求重定向到 index.html，让前端的 Vue.js 应用接管路由逻辑。
1. Nginx 设置

如果你使用 Nginx 作为服务器，可以按照以下方式设置：

server {
listen 80;
server_name yourdomain.com;
root /path/to/your/dist; # 你的 Vue 项目打包后的静态文件路径
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}

复制代码

try_files $uri $uri/ /index.html;：这个指令告诉 Nginx 先尝试请求的 URI，如果找不到，则返回 index.html，由前端路由处理。

2. Apache 设置

如果你使用 Apache 作为服务器，可以创建或修改 .htaccess 文件：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# 如果请求的文件存在，则直接提供该文件
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 如果文件不存在，则重定向到 index.html
RewriteRule . /index.html [L]
</IfModule>

复制代码

3. 使用 hash 模式

如果你不想更改服务器设置，可以思量使用 Vue Router 的 hash 模式。这种模式会在 URL 中添加 #，例如 example.com/#/about。这种方式不会有刷新 404 的问题，因为 # 后的内容不会被发送到服务器。
在 router/index.js 中，将 mode 设置为 hash：

const router = new VueRouter({
mode: 'hash',
routes: [
// 你的路由配置
]
});

复制代码

总结

history 模式：需要在服务器端设置，确保所有路由都重定向到 index.html。
hash 模式：更简单，不需要服务器端设置，但 URL 中会有 #。

根据你的项目需求和服务器情况选择合适的解决方案。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)