Vite不断刷新整个页面

Question

我从CRA迁移到Vite，它一直刷新整个页面。

我在 GitHub 上看到了这个问题#7131，这不是我的问题。

这是我的

vite.config.js

：

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
const path = require(`path`)
const aliases = {
  '@Form': 'src/Components/Form/Exports',
  '@List': 'src/Components/List/Exports',
  '@Browse': 'src/Components/Browse/Browse',
  '@Tree': 'src/Components/Tree/Exports',
  '@Tab': 'src/Components/Tab/Exports',
  '@Dashboard': 'src/Components/Dashboard/Dashboard',
  '@Panel': 'src/Panel/Panel',
}

const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [key, path.resolve(__dirname, value)]),
)

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, '.')

  console.log(env)

  const htmlPlugin = () => {
    return {
      name: "html-transform",
      transformIndexHtml(html) {
        return html.replace(/%(.*?)%/g, function (match, p1) {
          return env[p1]
        })
      },
    }
  }

  return {
    resolve: {
      alias: resolvedAliases
    },
    plugins: [react(), htmlPlugin()],
    server: {
      host: '0.0.0.0',
      hmr: {
        clientPort: 443
      }
    }
  }
})

由于我的项目包含数百个组件，并且使用 OAuth 和第三方身份验证器，因此每次重新加载都需要相当长的时间（可能 5 秒）。

这极大地减慢了开发速度。

我应该怎么做才能解决这个问题？ 我应该怎么做才能防止这种情况发生？

Answer 1

请确保您检查是否导出的某些内容或变量不是反应组件，在我的情况下，我发现我这样做了，并且每当我保存它时都会刷新整个用户界面

export const services=[]

我创建了一个单独的文件并声明它并使用

const services=[];
export default services