vben 打包 地址不带#号
在使用 Vue.js 进行开发时,经常会遇到需要将项目打包并部署到服务器上的需求。打包后的项目通常需要通过 HTTP 服务器提供服务,以便在浏览器中访问。在这个过程中,如果你遇到了打包后的地址中包含#
号的问题,这通常是由于 Vue 路由模式导致的。
背景
在 Vue.js 中,路由通常是通过 vue-router
管理的。vue-router
有两种模式:hash 模式 和 history 模式。
-
Hash 模式:使用 URL 的 hash 来模拟一个完整的 URL,例如
http://example.com/#/user/id
。这种模式不会向服务器发送请求,因此服务器不需要做特殊的配置来处理路由。 -
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' })