必须将 manifest.json 中 h5.router.base 设为 "./",以使静态资源引用为相对路径,并手动修正打包后 index.xxx.js 中硬编码的 base: "/" 为 "./",否则 tabbar 图标等资源会 404。

manifest.json 中 h5.base 必须设为 ./
打包后资源路径变成相对路径,核心就是让所有静态资源(js、css、font、img)的引用前缀不带域名和根路径。uni-app 的 H5 打包逻辑依赖 manifest.json 里的 h5.router.base 配置,它直接控制生成的 index.html 中 script/style 标签的 src/href 前缀。
必须把这一项设成 ./,不能是 /、/subpath/ 或空字符串:
{
"h5": {
"router": {
"mode": "hash",
"base": "./"
}
}
}
注意:base 是运行时路由基础路径,但它也会影响构建阶段生成的资源路径——Webpack 会据此推导 publicPath。设为 ./ 后,打包出的 index.html 里类似这样的引用就会出现:
<script src="./js/app.123456.js"></script>
而不是:
<script src="/js/app.123456.js"></script></p>
<H3>tabbar 图标路径失效?手动修正 <code>index.xxx.js</code> 中的 <code>base</code></H3>
<p>即使 <code>manifest.json</code> 已设 <code>base: "./"</code>,实际打包后发现 tabbar 图标 404,大概率是因为 uni-app 构建时在生成的 <code>index.xxx.js</code> 文件里硬编码了 <code>base: "/"</code>,覆盖了 manifest 配置。</p>
<p>打开 <code>unpackage/dist/build/h5/js/index.xxx.js</code>(xxx 是哈希值),搜索 <code>uniConfig.router</code>,找到类似这一行:</p>
<pre class="brush:php;toolbar:false;">e.uniConfig.router={mode:"hash",base:"/"}
把它改成:
e.uniConfig.router={mode:"hash",base:"./"}
- 这个文件每次打包都会重写,所以不能靠手动改一次就一劳永逸
- 如果你用 HBuilderX,可在“发行”前勾选“自定义模板”,把修改逻辑写进构建后脚本(但官方不暴露钩子)
- 更稳妥的做法:用 CLI + 自定义 webpack 配置,在
vue.config.js中通过configureWebpack注入 patch 逻辑(需正则替换输出 JS)
publicPath 和 base 不是一回事,别混用
有人试图在 vue.config.js 里设 publicPath: "./" 来解决,这在 uni-app CLI 项目中基本无效——因为 uni-app 的构建流程绕过了 Vue CLI 默认的 publicPath 处理链,而是由自己的编译器读取 manifest.json 决定。
真正起作用的只有两个地方:
-
manifest.json→ 控制index.html资源引用和初始路由 - 打包后 JS 文件中的
uniConfig.router.base→ 控制运行时路由解析和 tabbar/icon 加载路径
如果只改前者不碰后者,图标、部分懒加载页面资源仍会尝试从 /static/ 下加载,导致 404。
部署到子目录时,Nginx location 配置要匹配 ./
设成相对路径不是为了“随便放哪都行”,而是为了适配部署到任意子路径(如 https://example.com/myapp/)。这时 Nginx 的 location 必须指向该子路径,并启用 try_files 回退:
location /myapp/ {
alias /var/www/myapp/;
try_files $uri $uri/ /myapp/index.html;
}
关键点:
-
alias后面路径末尾带斜杠,且与 URL 路径一致(/myapp/→/var/www/myapp/) -
try_files最后一项必须是/myapp/index.html,不能是/index.html,否则 history 模式下刷新 404 - 如果用
root而非alias,则路径拼接逻辑不同,容易出错
相对路径生效的前提,是整个站点被当作子目录部署;如果只是本地测试开个 http-server,也要确保服务根目录和 URL 路径对齐,否则照样 404。


















