前端项目打包后资源路径为什么404了？

Mr-辽源提问于 2026-03-25 08:31:19 阅读 4

前端

我本地开发一切正常，但 npm run build 打包部署到服务器后，所有 CSS 和 JS 文件都 404。看了下 HTML 里引用的路径是相对路径，是不是这里出问题了？

我的 publicPath 配置的是 ‘./’，但好像没生效。这是生成的 index.html 片段：

<!DOCTYPE html>
<html>
<head>
  <link href="css/app.123456.css" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <script src="js/app.123456.js"></script>
</body>
</html>

我来解答赞 0 收藏

反馈

1 条解答

一彩云 Lv1

我之前也碰到过类似的问题。看起来你配置的 publicPath 是 './'，这在大多数情况下应该没问题，但有时候可能因为服务器配置或者构建工具的其他设置导致资源路径解析不正确。

首先，确认一下你的构建工具（比如 Webpack）的 publicPath 配置是否正确。对于 Webpack，你可以在 webpack.config.js 中检查一下：

module.exports = {

  // 其他配置...

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'js/[name].[contenthash].js',

    publicPath: './'

  }

}

确保你的构建输出目录结构与 HTML 中引用的路径一致。有时候，可能是构建出来的文件夹结构不对，导致路径不对。

另外，检查一下你的服务器配置。有些服务器默认会忽略相对路径或者需要特定的配置来支持相对路径的资源加载。可以尝试将 publicPath 设置为 ''（空字符串）或者 '/'（根路径），看看是否有不同效果。

最后，清理一下之前的构建缓存，重新构建项目，有时候缓存也会导致一些奇怪的问题。希望这些能帮到你！

2026-03-25 09:06