解决Vue应用中遇到路由刷新后出现 404 错误

解释:

Vue 应用中遇到路由刷新后出现 404 错误,通常是因为 Vue 应用是个单页应用(SPA),它通过 Vue Router 管理路由,通过 HTML5 History Mode 实现页面导航无需重新加载页面。当直接访问非首页的路由或者刷新页面时,服务器会尝试寻找对应的真实物理路径,找不到就会返回 404 错误。

解决方法:

  1. 服务器配置:需要配置服务器,使其可以正确处理所有路由请求,并返回同一个index.html页面。

对于不同的服务器,配置方法如下:

对于 Apache: 在服务器的配置文件(通常是.htaccess文件)中添加以下规则:
*

复制代码
  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>

对于 Nginx: 在 Nginx 配置文件中添加如下配置:
*

复制代码
  location / {
    try_files $uri $uri/ /index.html;
  }

对于 Node.js: 如果你使用的是 Node.js 的 Express 服务器,可以添加以下路由来捕获所有路由请求并返回index.html

复制代码
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
  });
  • 使用 Hash Mode:另一种方法是使用 Vue Router 的 Hash Mode,它不需要服务器端的特别配置。在 Vue Router 中设置mode: 'hash'即可启用。

  • 例如,在 Vue 应用的入口文件main.js中配置 Vue Router:

复制代码
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  import App from './App.vue';
   
  Vue.use(VueRouter);
   
  const router = new VueRouter({
    mode: 'hash', // 启用 hash mode
    routes: [
      // 定义路由
    ]
  });
   
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app');

选择合适的方法进行配置,即可解决 Vue 应用在路由刷新时出现的 404 错误。

相关推荐
华洛20 分钟前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼28 分钟前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔1 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗1 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗1 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥1 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial1 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front2 小时前
面试是一门学问
前端·面试
90后的晨仔2 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔2 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js