使用Vite开启HMR的同时能否生成/dist目录下的构建文件？

Vite 执行默认的 vite 命令启动开发模式时，默认基于内存提供编译后的文件服务，不会将产物写入磁盘的 /dist 目录，只有执行 vite build 时才会触发磁盘写入，这是Vite的默认设计，目的是提升开发阶段的响应速度。

• 方案1：修改Vite配置强制开发模式写入磁盘
  在你的vite.config.js/ts中新增以下配置项即可：

import { defineConfig } from 'vite'

export default defineConfig({
  // 你的其他原有配置保持不变
  server: {
    // 开启开发模式下产物写入磁盘
    write: true
  },
  build: {
    // 保持你原有配置的输出路径即可，默认就是dist
    outDir: 'dist'
  }
})

修改配置后重启vite命令，就能看到/dist目录下会实时生成编译后的文件，直接在Chrome扩展管理页加载该目录即可正常调试，修改代码触发HMR时也会自动更新/dist内的对应文件。

• 方案2：使用浏览器扩展专属Vite插件
  如果是长期开发Chrome扩展，更推荐使用专门适配扩展场景的vite-plugin-web-extension插件，它原生支持开发模式自动写入dist、HMR适配扩展上下文、多入口自动配置等能力，安装命令为：
  npm install vite-plugin-web-extension -D
  安装完成后按照插件基础配置调整你的vite.config即可，不用额外手动处理产物写入逻辑。

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