Webpack 的 publicPath 到底该怎么配才能加载静态资源？

シ亚美提问于 2026-03-16 12:03:23 阅读 169

前端

我用 Webpack 打包了一个前端项目，部署到服务器子路径 /app/ 下，但所有 JS 和 CSS 都 404 了。我试过在 output.publicPath 里写 /app/，也试过写成相对路径 ./，但都不行。本地 devServer 能跑，一上线就挂。

我的 HTML 是这样引用入口文件的：

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script src="/main.js"></script>
</body>
</html>

是不是 HTML 里的路径也得跟着改？还是说 publicPath 配错了？真的搞不懂这个配置到底影响哪些地方……

我来解答赞 10 收藏

反馈

2 条解答

皇甫晓莉 Lv1

publicPath 这个配置确实容易让人迷惑，特别是部署到子路径时。你现在的配置有两个问题需要同时解决。

首先在 webpack.config.js 里，output.publicPath 要写成 /app/，注意末尾的斜杠不能少。这个配置会告诉 Webpack 在生成的所有资源引用中都加上 /app/ 前缀。像这样：

module.exports = {

  output: {

    publicPath: '/app/',

    // 其他配置...

  }

}

然后你的 HTML 文件里的

或者更省事的方案——用相对路径，publicPath设成 './'，HTML也改成 ./main.js，这样无论部署到哪个子路径都不用再改了。

2026-03-17 15:04