vue-cli npm run build 打包问题 webpack@3.6

本文介绍了Vue.js中vue-router的两种模式:hash模式和history模式,并解释了这两种模式的区别及应用场景。hash模式通过URL哈希实现路由切换,适用于所有浏览器;history模式则利用HTML5的history API实现平滑的页面跳转,需要后端配置支持。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1, vue-router 路由 有两个模式 (mode)

  • hash (默认模式)

    使用URL来模拟一个完整的URL 但是没个URL都会带上 "#/'' 支持所有浏览器

    这个模式使用 redirect (重定向) 手动刷新页面会定到 第一个页面

  • history 模式

    history.pushState API 来完成 URL 跳转而无须重新加载页面 这个模式可去掉"#/"

    同时线上 (生成环境)需要后台配合把所有访问不到的资源路径后台重定向到 index.html

    后端配置例子

    https://router.vuejs.org/zh/guide/essentials/history-mode.html

  1. base 基础路径 默认为"/"

    整个单页应用服务在 /dist/ 下,然后base就应该设为"/dist/"。

  1. 打包生产环境 会生成 dist目录

    • 使用 hash 模式

      如果页面是空白的 可能是 config ->index build 对象中assetsPublicPath "/" 的问题 可设置为"./"

      "/" :表示 访问服务器根目录资源

      "./" 表示访问服务器当前目录的根目录资源

    • 如果使用 history 模式 如果只有样式 无HTML 内容

      那么 不仅仅 是assets PublicPath 问题

      还需进入dist 目录 全选打包 并放入 服务器访问的根目录解压 比如 Tomcat 就要放进 ROOT 目录中

      因为 只打包dist 文件夹 解压的时候会生成 dist文件夹

      而进入 dist 文件夹全选文件打包 解压时会生成对应文件

    • 如果 要使用 history 模式 并且不把前端资源包放到 服务器根目录下, 必须 配合 base 来使用

转载于:https://www.cnblogs.com/gaoguowen/p/9620491.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值