已部署到线上服务器的Vite项目修改代码不生效，如何让变更生效？

线上服务器运行的是Vite生产构建完成的静态文件，不是开发环境的热重载服务，所以修改代码后仅刷新浏览器不会生效，必须走重新构建+部署的流程，终端操作步骤如下：

• 本地重新构建生产包
  回到本地项目根目录，运行构建命令生成最新的静态资源：

  npm run build
  

  若使用yarn或pnpm，对应替换为：

  yarn build
  

  pnpm build
  

  执行完成后，项目根目录会生成dist文件夹（默认配置下），里面就是编译后的最新产物。

• 替换服务器上的旧文件
  将本地dist文件夹内的所有文件，替换掉服务器部署目录中的旧文件。终端可直接用scp命令传输：

  scp -r dist/* 你的服务器用户名@服务器IP:/服务器部署目录路径
  

  也可以用FTP工具（如FileZilla）可视化完成替换操作。

• 强制清理浏览器缓存（可选）
  部分情况下浏览器会缓存旧的静态资源，即使服务器文件已更新仍显示旧内容，此时可按Ctrl + Shift + R（Windows/Linux）或Cmd + Shift + R（Mac）强制刷新，跳过缓存加载最新文件。

额外优化提示：Vite默认会给构建后的文件添加哈希后缀（比如app.abc123.js），只要你未修改配置关闭该功能，每次构建后的文件名都会不同，浏览器会自动加载新文件，无需手动清理缓存。如果没有这个效果，可检查vite.config.js中的build.rollupOptions.output配置，确保开启了文件名哈希。

内容的提问来源于stack exchange，提问作者Greynix