Git worktree 切换分支后为什么页面样式错乱了？

司马子晴提问于 2026-03-25 20:59:20 阅读 15

工具

我用 git worktree add 创建了一个新工作区来同时开发两个功能分支，但切换到新 worktree 后，本地启动的开发服务器渲染出来的页面样式全乱了，控制台也没报错。

明明代码逻辑没动，只改了分支。是不是静态资源路径出问题了？我检查了 HTML 里的引用路径，看起来是正常的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/assets/main.css" rel="external nofollow"  />
</head>
<body>
  <div id="app"></div>
  <script src="/assets/app.js"></script>
</body>
</html>

难道 worktree 会影响 Webpack 的 publicPath 或者本地服务器的根目录解析？

我来解答赞 5 收藏

反馈

1 条解答

晨曦 Dev Lv1

你遇到的问题确实和 worktree 有点关系，但不是直接的因果关系。让我一步步给你分析一下。

第一步，先说说 worktree 的原理。worktree 其实就是创建了不同的工作目录，但它们共享同一个 .git 目录。这可能会导致一些缓存或者构建配置的问题，特别是在使用 webpack 这种工具的时候。

第二步，你的问题很可能出在静态资源路径上，虽然 HTML 里的引用路径看起来没问题，但可能是开发服务器对这些路径的解析出了问题。特别是 publicPath 配置。

第三步，打开你的 webpack 配置文件，找到 output.publicPath 这个配置项。如果你现在是用相对路径（默认是 /），试试改成绝对路径看看效果：

module.exports = {

  // 其他配置

  output: {

    publicPath: 'http://localhost:8080/assets/', // 假设你的开发服务器运行在这个端口

  },

};

这段代码设置了 webpack 输出的公共路径为开发服务器的完整 URL。这样可以确保资源加载时不会因为不同 worktree 的目录结构产生歧义。

第四步，如果改了 publicPath 还不行，再检查一下你的开发服务器配置。有些框架自带的开发服务器会对根目录进行特殊处理，比如 Next.js 或者 Vue CLI。如果是这种情况，可能需要调整开发服务器的 base 路径配置。

第五步，清理浏览器缓存。我经常被这个坑得不轻，尤其是用了 worktree 后，浏览器会缓存旧版本的资源文件，造成样式错乱的现象。

最后说一句，worktree 确实是个好东西，能让你同时开发多个分支，但也会带来一些意想不到的问题。慢慢调试吧，兄弟，我也经历过这些痛苦。希望这些建议能帮你解决问题。

2026-03-25 23:03