Vue路由：直接访问URL无效仅router-link可用，求排查方案

你猜的没错！这个问题完全是因为开启了Vue Router的history模式，这是单页应用（SPA）使用history模式时的典型“新手坑”，很多刚接触前端路由的开发者都会碰到——你并没有漏掉什么明显的知识点，只是对SPA的路由机制和服务器交互逻辑还没完全摸透～

问题原因拆解 #

咱们先理清两种跳转方式的本质区别：

• 点击<router-link to="/hardware">时，这是前端路由跳转：Vue Router会拦截浏览器的默认跳转行为，只更新页面内容和地址栏URL，不会向服务器发送新的HTTP请求，所以一切正常。
• 直接在地址栏输入/hardware或通过外部链接访问时，这是浏览器发起的HTTP请求：浏览器会直接向服务器请求/hardware这个路径对应的资源，但你的SPA本质上只有一个index.html文件，服务器上根本不存在/hardware这个文件，所以返回404错误。

解决方案：配置服务器的“回退路由” #

要解决这个问题，核心是让服务器把所有找不到的路径请求，都转发到index.html，然后由Vue Router来处理前端路由。下面分几种常见场景给出配置：

1. 本地开发环境（Vue CLI）

如果是用Vue CLI做本地开发，只需要在项目根目录的vue.config.js中添加devServer.historyApiFallback配置：

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

保存后重启开发服务器，直接访问/hardware就正常了。

2. 生产环境服务器配置

根据你使用的服务器类型，对应配置：

• Nginx：在你的站点配置文件中，修改location /块：

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

这个配置的意思是：先尝试匹配真实存在的文件/目录，如果找不到，就返回index.html。

• Apache：在项目根目录创建.htaccess文件，添加以下内容（确保服务器开启了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>

• Express Node.js服务器：使用connect-history-api-fallback中间件，先安装依赖：

npm install connect-history-api-fallback --save

然后修改服务器代码：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 注意：history中间件要放在静态文件服务之前
app.use(history());
app.use(express.static('dist')); // dist是Vue项目打包后的目录

app.listen(3000, () => {
  console.log('服务器启动成功');
});

额外注意点 #

如果你的项目部署在子路径下（比如https://example.com/my-app/hardware），需要确保：

1. Vue Router的base配置正确：base: '/my-app/'
2. 服务器配置也要对应调整（比如Nginx的location /my-app/块，Apache的RewriteBase /my-app/）

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