vue打包的项目，从根目录进去路由可访问，浏览器直接打开这个路由不可访问

Vue 项目路由访问问题分析

您描述的问题是 Vue 打包后的项目在直接访问子路由时出现 404 错误，而从首页导航可以正常访问。这是一个常见的 Vue 路由配置问题。

问题原因

这是因为您使用的是 Vue Router 的 history 模式，但没有在服务器端进行相应的配置。当直接访问子路由时，服务器会尝试查找对应的物理文件，但找不到就会返回 404。

解决方案

1. 服务器配置（推荐）

您需要在服务器上配置 URL 重写，将所有请求重定向到 index.html。以下是不同服务器的配置方法：

Nginx 配置

 

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

 

 

Apache 配置

 

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

 

 

2. 使用哈希模式（简单但不推荐）

如果您不想配置服务器，可以修改路由模式为哈希模式：

 

const router = new VueRouter({ mode: 'hash', routes: [...] })

 

 

这样 URL 会变成类似 https://xxxx/#/love的形式，但会影响美观。

3. 其他注意事项

1. 确保您的 vue.config.js中设置了正确的 publicPath：

 

module.exports = { publicPath: '/' }

 

 

1. 如果您使用的是静态文件托管服务（如 GitHub Pages），可能需要特殊的配置。

总结

最佳解决方案是在服务器上配置 URL 重写（方案1），这样既能保持 URL 美观，又能解决直接访问子路由的问题。