vben 打包 地址不带#号

 

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'
})