uni-app H5发行未生成对应的pages文件夹

uni-app H5发行未生成对应的pages文件夹

操作步骤:

  • 新建uni-app项目->选择 Hello uni-app 模板 -> 发行 -> 网站-PC Web手机或H5

预期结果:

  • 生成对应的pages文件夹

实际结果:

  • 没有生成

bug描述:

  • 打包h5无法生成对应的pages文件夹,
开发环境 版本号 项目创建方式
Windows windows 10 专业版 HBuilderX
HBuilderX 3.2.16

Image Image


更多关于uni-app H5发行未生成对应的pages文件夹的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app H5发行未生成对应的pages文件夹的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的描述,这个问题是HBuilderX 3.2.16版本在发行H5时的一个已知配置问题。在较新的HBuilderX版本中,发行H5到网站时默认采用了“history”路由模式,而非传统的“hash”模式。在history模式下,构建产物不会生成独立的pages文件夹,所有页面资源会被打包到根目录的index.html及相关的JS、CSS文件中。

核心原因:路由模式差异。

  • hash模式:URL中带有#,服务器无需特殊配置。构建时会为每个页面生成一个对应的HTML文件(位于/pages/xxx/xxx.html),便于直接访问或做静态部署。
  • history模式:URL更简洁(无#),但需要服务器端配置支持,以避免直接访问子路由时返回404。构建时仅生成一个入口index.html,页面切换由前端路由控制,因此不需要pages文件夹。

解决方案(二选一):

  1. 修改为hash模式(推荐,兼容性好): 在项目根目录的manifest.json文件中,找到h5配置节点,设置routermodehash

    "h5": {
        "router": {
            "mode": "hash"
        }
    }
    

    修改后重新发行,即可在unpackage/dist/build/h5目录下看到生成的pages文件夹。

  2. 保持history模式,但需要正确的服务器部署配置: 如果你希望使用history模式,在部署时,必须将服务器(如Nginx、Apache)配置为将所有前端路由请求都重定向到index.html。以Nginx为例,配置示例如下:

    location / {
        try_files $uri $uri/ /index.html;
    }
回到顶部