使用Axios请求时引入Tailwind Vite插件致页面自动刷新问题求助

这种情况大概率是Tailwind Vite插件的热更新（HMR）机制与请求过程中的文件变动触发了页面刷新，或是按钮的默认行为未被彻底拦截（即便你用了preventDefault，也可能存在事件冒泡、框架处理逻辑优先级等问题）。具体细分：

1. 文件监听冲突：Tailwind插件会让Vite监听项目内与样式相关的文件（比如tailwind.config.js、所有包含Tailwind类的文件），如果Axios请求过程中不小心修改了这些被监听的文件（比如请求回调更新了配置文件、生成的临时文件被纳入监听范围），就会触发Vite的HMR页面刷新。
2. 表单默认行为未彻底阻止：如果按钮嵌套在<form>标签内，默认type="submit"，即便调用了preventDefault，也可能因为事件冒泡、框架（如Vue/React）的事件处理逻辑优先级问题，导致表单提交的默认行为未被完全拦截——而移除Tailwind插件时，可能恰好有其他代码（比如全局样式重置的副作用）间接阻止了刷新。
3. Tailwind JIT模式的误判：若开启了Tailwind的JIT模式，它会实时扫描所有文件的类名变化，若请求过程中动态生成了带有Tailwind类的DOM元素，可能被误判为文件内容变动，触发HMR。

1. 排查并阻止HMR触发的文件变动 #

• 查看Vite终端输出，页面刷新时会显示类似[vite] hmr update /path/to/file的日志，定位被修改的文件。
• 在vite.config.js中添加忽略监听的配置，避免Vite监听不必要的文件：

import { defineConfig } from 'vite';
import tailwind from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwind()],
  server: {
    watch: {
      // 根据实际情况添加临时文件、日志文件等路径
      ignored: ['**/.temp/**', '**/logs/**', '**/*.log']
    }
  }
});

2. 彻底阻止按钮的默认行为 #

• 原生JS场景：同时调用preventDefault()和stopPropagation()，确保事件不会冒泡或触发默认动作：

document.getElementById('request-btn').addEventListener('click', (e) => {
  e.preventDefault();
  e.stopPropagation();
  // 执行Axios请求
  axios.get('/api/data')
    .then(res => console.log(res.data))
    .catch(err => console.error(err));
});

• 框架场景：用框架自带的事件修饰符简化处理：
  • Vue：<button @click.prevent="fetchData">发起请求</button>
  • React：

  const handleClick = (e) => {
    e.preventDefault();
    // Axios请求逻辑
  };
  return <button onClick={handleClick}>发起请求</button>;
  

3. 调整Tailwind配置避免误触发 #

• 缩小content配置的扫描范围，仅包含项目源码文件；或临时关闭JIT模式测试是否是该模式导致：

// tailwind.config.js
export default {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}' // 仅扫描src下的源码文件
  ],
  // 若不需要JIT可注释该行
  // mode: 'jit',
  theme: {
    extend: {}
  },
  plugins: []
};

4. 直接避免表单自动提交 #

如果按钮在<form>标签内，给按钮显式设置type="button"，彻底规避默认的submit行为：

<form>
  <button type="button" onclick="fetchData()">发起请求</button>
</form>

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