明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

vben 打包 地址不带#号

Posted on 2025-04-28 11:03  且行且思  阅读(20)  评论(0)    收藏  举报
 
vben 打包 地址不带#号

在使用 Vue.js 进行开发时,经常会遇到需要将项目打包并部署到服务器上的需求。打包后的项目通常需要通过 HTTP 服务器提供服务,以便在浏览器中访问。在这个过程中,如果你遇到了打包后的地址中包含#号的问题,这通常是由于 Vue 路由模式导致的。

背景

在 Vue.js 中,路由通常是通过 vue-router 管理的。vue-router 有两种模式:hash 模式history 模式

  1.  

    Hash 模式:使用 URL 的 hash 来模拟一个完整的 URL,例如 http://example.com/#/user/id。这种模式不会向服务器发送请求,因此服务器不需要做特殊的配置来处理路由。

     

  2. History 模式:利用 HTML5 History API 来实现 URL 的路由,例如 http://example.com/user/id。这种方式需要服务器配置来正确处理所有路由,确保无论什么路由都能返回同一个入口文件(通常是 index.html),然后由前端路由接管。

问题

如果你打包后的 Vue 应用使用了 history 模式,而服务器没有正确配置来处理所有的路由,用户尝试访问非根路由时可能会遇到 404 错误。例如,访问 http://example.com/user/id 时,如果服务器直接返回 404 而不是 index.html,那么浏览器会显示一个空白页或者错误页面。

 

在哪儿开启?

在你的实例化Router的时候配置开启即可:

const routers = new VueRouter({
  routes: router,
  mode: 'history'
})