uniapp h5 打包的静态资源路径base如何配置

我在使用UniApp开发H5应用时，打包后的静态资源路径有问题。请问如何配置base路径才能正确加载资源？

2 回复

在manifest.json的h5配置中，设置publicPath字段。例如：

"h5": {
  "publicPath": "./"
}

根据部署环境调整路径，本地调试用./，CDN部署用完整URL。


在 UniApp 中，H5 打包的静态资源路径可以通过 vue.config.js 文件中的 publicPath 配置项来设置。具体步骤如下：

  1. 在项目根目录创建或修改 vue.config.js 文件（如果不存在则新建）。
  2. 配置 publicPath：
    • 如果静态资源部署在根目录，设置为 './'。
    • 如果部署在子目录（如 my-app/），设置为 '/my-app/'。

示例代码：

// vue.config.js
module.exports = {
  // 配置 H5 静态资源路径
  publicPath: './', // 默认相对路径，适用于大多数情况
  // 或者指定绝对路径（例如部署在子目录）：
  // publicPath: '/my-app/',
  
  // 其他可选配置
  transpileDependencies: ['@dcloudio/uni-ui']
};

注意事项：

  • 使用 ./ 可避免路径错误，适用于 CDN 或子目录部署。
  • 修改后重新打包生效：运行 npm run build:h5。
  • 确保服务器正确配置，避免资源加载 404 错误。

如有部署路径问题，可检查生成的 dist/build/h5 目录中文件引用路径是否正确。

回到顶部