vue-router history模式下访问/dashboard路径返回404错误如何解决

你在vue-router配置中开启了mode: 'history'，该模式依赖HTML5 History API实现无哈希（#）的干净路径，但是你当前部署/本地开发的web服务器没有做兜底路由配置：

• 访问根路径/时，服务器默认返回项目入口的index.html，vue-router拿到路由后正常渲染对应组件
• 直接访问/dashboard路径时，浏览器会直接向服务器请求该路径对应的资源，服务器没有对应路径的静态资源/接口，就直接返回404错误，vue-router根本没有被加载执行，自然无法渲染对应组件。

本地开发场景 #

如果是自行搭建的webpack-dev-server开发服务，在webpack配置中添加以下参数即可：

devServer: {
  historyApiFallback: true
}

如果是vue-cli/vite搭建的项目，默认已经内置了history模式的fallback支持，不需要额外配置。如果是用其他本地服务（比如本地启动的nginx），参考下面生产环境的对应配置即可。

生产部署场景 #

根据你使用的web服务器做对应的兜底配置，所有路径请求都优先返回项目的index.html，让vue-router接管路由逻辑：

Nginx配置示例 #

修改nginx.conf对应的server块：

location / {
  try_files $uri $uri/ /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>

Node.js Express服务配置示例 #

先安装connect-history-api-fallback中间件，再在服务启动代码中引入：

const history = require('connect-history-api-fallback')
app.use(history())

如果你的项目部署在域名的子路径下，还需要在vue-router配置中添加base参数，比如部署在/admin/路径下，配置为base: '/admin/'即可。

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