前端路由 h5

H5路由:

了两个 API,`pushState` 和 `replaceState`,通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 `onpopstate` 事件。通过这些就能用另一种方式来实现前端路由了,但原理都是跟 hash 实现相同的。用了 HTML5 的实现,单页路由的 url 就不会多出一个`#`,变得更加美观。但因为没有 `#` 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。



### 如何将 UniApp 项目打包为 H5 #### 准备工作 确保已经安装了 Node.js 和 npm,这是运行和构建 UniApp 所必需的基础环境。接着,在命令行工具中全局安装 `@dcloudio/uni-cli` 工具来管理项目的创建、编译等操作。 ```bash npm install -g @dcloudio/uni-cli ``` #### 创建并配置项目 如果还没有现成的 UniApp 项目,则可以通过官方脚手架快速搭建一个新的项目结构[^4]。 对于已有项目,打开终端进入项目根目录下执行如下指令来进行必要的依赖更新: ```bash npm install ``` 这一步骤会自动下载所需的全部包文件至本地环境中以便后续使用。 #### 修改配置文件 编辑位于项目根路径下的 `manifest.json` 文件内的 "HBuilderX" -> "app-plus" 节点设置项,确认其中有关于 web 平台的相关选项已正确开启或调整;另外还需关注 `"h5"` 字段里的具体参数设定,比如页面路由模式(`mode`)的选择等。 #### 构建过程 当一切准备就绪之后就可以正式开始打包流程了。依旧是在项目所在位置输入下面这条语句触发 Web 版本的应用程序生成动作: ```bash # 使用 hbuildx 命令进行跨平台编译,指定目标为 h5 npx hbuilderx build --platform=h5 ``` 上述命令将会读取源码资源按照既定规则转换为目标格式,并最终输出到预设好的输出文件夹内,默认情况下该文件夹名为 `dist/build/h5`。 #### 发布上线 得到完整的静态网页资料后,可以选择将其上传至任何支持托管 HTML/CSS/JS 文件的服务提供商处,如 GitHub Pages 或者 Netlify 等云服务平台上共享给更多的人访问体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值