VueJS中刷新二级及三级路由页面时无法加载的问题求助

这个问题我之前踩过好几次坑！本质上是Vue单页应用（SPA）使用history路由模式时的典型问题——因为SPA只有一个index.html入口文件，刷新二级/三级路由时，浏览器会直接向服务器请求对应路径的资源，但服务器上根本不存在这些文件，自然就报错了。而根路径和一级路由刷新正常，大概率是因为服务器默认会返回根目录的index.html，但深层路径就找不到了。

下面给你一步步的解决方案：

先确认你的路由模式 #

打开项目的路由配置文件（一般是src/router/index.js），检查是不是用了history模式：

const router = new VueRouter({
  mode: 'history', // 就是这个模式导致的问题
  routes: [...]
})

如果是hash模式（URL带#）不会有这个问题，但如果想要干净的URL，就需要配置服务器做路径 fallback。

本地开发环境快速解决 #

如果你用Vue CLI搭建项目，直接在vue.config.js里添加devServer的配置：

module.exports = {
  devServer: {
    historyApiFallback: true // 开启这个，本地刷新深层路由就正常了
  }
}

重启本地服务后，刷新/details/users这类路径就不会报错了。

生产环境服务器配置 #

线上部署时必须对应配置服务器，不然同样会出问题，这里给几个常用服务器的配置方案：

Nginx配置 #

在你的Nginx站点配置里，给根路径添加try_files规则，把所有请求都转发到index.html：

location / {
  try_files $uri $uri/ /index.html;
}

这样不管用户请求什么路径，Nginx都会返回入口文件，交给Vue路由去处理。

Apache配置 #

在项目根目录创建.htaccess文件，写入以下规则（确保Apache开启了mod_rewrite模块）：

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

Node.js/Express配置 #

如果用Express做服务器，在代码里添加全局路由，所有请求都返回index.html：

const express = require('express');
const path = require('path');
const app = express();

// 先托管dist目录的静态文件
app.use(express.static(path.join(__dirname, 'dist')));

// 所有请求都返回入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000);

额外注意点 #

如果你的项目部署在子路径下（比如http://example.com/my-app/details/users），还要在路由配置里设置base属性：

const router = new VueRouter({
  mode: 'history',
  base: '/my-app/', // 对应你的子路径
  routes: [...]
})

同时服务器配置也要对应调整（比如Nginx的location /my-app/）。

内容的提问来源于stack exchange，提问作者CodeHunter