当前位置: 首页 > news >正文

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 美观,又能解决直接访问子路由的问题。
http://www.hskmm.com/?act=detail&tid=27495

相关文章:

  • IObit Uninstaller一款强大的卸载工具!IObit Uninstaller卸载工具,IObit Uninstaller下载安装教程
  • 网络配置不再难:4G/Wi-Fi/以太网/虚拟网卡全指南
  • 计算几何
  • 2025开关按钮厂家最新推荐榜:开关按钮,带灯开关按钮,防水开关按钮,防爆开关按钮,防腐开关按钮等全种类覆盖,高品质设计与卓越性能口碑之选
  • 一种排查java.lang.OutOfMemoryError: Metaspace的方法
  • First Blog Post
  • 本站点即将在2025年改变研究方向和目标
  • 实用指南:12_OkHttp初体验
  • (AE)Adobe After Effects 2025 视频后期制作软件!安装包永久免费免激H解锁版下载与图文详细安装教程!!
  • Postgresql主从配置
  • 乒乓球
  • 2025年工程管理软件系统推荐榜:交付管理/工程协同/工程管理/智慧工地管理系统
  • 《程序员修炼之道》 阅读笔记一
  • 大型行为模型LBM超越语言模型的技术解析
  • 2025工程管理软件系统推荐榜:技术赋能下的场景化解决方案全景
  • 【LVS入门宝典】LVS-TUN模式原理与配备:跨越网络界限的负载均衡解决方案
  • Java基础-Eclipse工具-面向对象(1)
  • Avalonia UI 投资 Wilderness Labs
  • BLE开发新体验:四种模式全解析,源码免费开放
  • JBoltAI V4 - 那年-冬季
  • 【EI检索】2025年智能决策与机器学习国际学术会议 (ICIDML 2025)
  • 10月9号
  • Qwen3技术报告
  • 赋能智慧监管:国标GB28181平台EasyGBS在明厨亮灶场景中的深度应用
  • CFD与FDM, FEM, FVM的关系?
  • 央国企高管团队为何频繁流失?揭示薪酬结构失衡的深层原因与优化策略
  • 在Ubuntu 22.04系统上安装libimobiledevice的步骤
  • Redis sentinal模式,master挂了的 选举过程
  • 软件技术基础第一次
  • 音频基础知识