vue项目,页面刷新就404了

在 Vue.js 项目中,如果使用了 vue-router 并且路由模式设置为 history 模式,那么在刷新页面或直接访问某个路由时,可能会遇到 404 错误。这是因为 history 模式下,前端路由的路径并不匹配服务器上的实际路径,导致服务器无法找到对应的资源。

解决方案

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

1. Nginx 配置

如果你使用 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 文件:

apache 复制代码
<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

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

总结

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

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

相关推荐
朝阳5817 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo7 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~27 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼31 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
小浣熊喜欢揍臭臭41 分钟前
react+umi项目如何添加electron的功能
javascript·electron·react
惜.己43 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
乖女子@@@1 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响1 小时前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端