解释:
Vue 应用中遇到路由刷新后出现 404 错误,通常是因为 Vue 应用是个单页应用(SPA),它通过 Vue Router 管理路由,通过 HTML5 History Mode 实现页面导航无需重新加载页面。当直接访问非首页的路由或者刷新页面时,服务器会尝试寻找对应的真实物理路径,找不到就会返回 404 错误。
解决方法:
- 服务器配置:需要配置服务器,使其可以正确处理所有路由请求,并返回同一个
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 错误。