Vite代码变更未生效求助：构建预览后页面无更新

问题核心原因 #

1. 错误使用构建命令：步骤5中的npx vite build preview是无效命令，vite build不支持preview参数，导致未重新构建产物就启动预览，加载的还是旧资源。
2. 浏览器或预览服务缓存：未重启预览服务、浏览器缓存旧资源，导致新构建的内容无法展示。

修复步骤 #

1. 修正构建预览流程 #

每次修改代码后，严格执行以下两步：

• 执行npx vite build：重新构建生产产物，确保dist目录（默认输出目录）生成最新文件。
• 关闭之前运行的vite preview进程，再执行npx vite preview：启动新的预览服务，读取最新的构建产物。

2. 强制刷新浏览器缓存 #

访问预览页面时，使用强制刷新快捷键跳过浏览器缓存：

• Windows/Linux：Ctrl + F5
• Mac：Cmd + Shift + R

3. 配置构建哈希避免缓存（可选） #

修改vite.config.js，开启资源文件名哈希，确保每次构建的资源文件名唯一，从根源避免缓存问题：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        // 给资源文件添加哈希后缀
        assetFileNames: '[name]-[hash].[ext]',
        chunkFileNames: '[name]-[hash].js',
        entryFileNames: '[name]-[hash].js'
      }
    }
  }
})

4. 验证构建产物 #

执行npx vite build后，检查项目根目录下的dist文件夹：

• 确认文件的修改时间为最新，说明构建成功生成了新产物。
• 如果dist无更新，查看vite build的控制台输出，排查是否有构建错误导致产物未更新。

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