Vite+React本地开发修改代码不自动重编译问题求助

问题描述 #

我对默认的vite.config.js做了以下修改：

• React源码文件存放于src/react/目录下
• 编译输出文件打包至./dist/OUTPUT/widget/目录

配置文件内容如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default ({ mode }) => {
  return defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src/react', import.meta.url))
      }
    },
    define: {
      'process.env.NODE_ENV': JSON.stringify('development'),
      '__APP_VERSION__': JSON.stringify(process.env.npm_package_version)
    },
    build: {
      /* cssCodeSplit: false, */
      outDir: './dist/OUTPUT/widget',
      rollupOptions: {
        input: {
          main: './src/react/main.jsx'
        },
        output: {
          entryFileNames: `[name].js`,
          chunkFileNames: `[name].js`,
          assetFileNames: `[name].[ext]`
        }
      }
    }
  })
};

执行vite build命令时，React代码可正常重新编译并更新dist/OUTPUT/widget/main.js文件。但启动vite本地服务器后，修改React源码文件不会触发自动重新编译，请问需要补充什么配置？

问题原因与解决方法 #

问题根源 #

你当前仅在build字段中配置了Rollup的入口文件，但Vite开发模式默认以项目根目录的index.html作为入口，不会读取build.rollupOptions.input的配置。开发服务器未关联到你的src/react/main.jsx入口，因此修改源码时无法触发自动编译或热更新。

解决方法 #

方法一：适配Vite开发服务器的入口逻辑

1. 调整配置文件：
   在defineConfig中添加server字段，同时建议将硬写的development改为传入的mode参数，让配置更灵活：

   export default ({ mode }) => {
     return defineConfig({
       plugins: [react()],
       resolve: {
         alias: {
           '@': fileURLToPath(new URL('./src/react', import.meta.url))
         }
       },
       define: {
         'process.env.NODE_ENV': JSON.stringify(mode),
         '__APP_VERSION__': JSON.stringify(process.env.npm_package_version)
       },
       // 配置开发服务器，指定打开test.html
       server: {
         open: '/test.html'
       },
       build: {
         outDir: './dist/OUTPUT/widget',
         rollupOptions: {
           input: {
             main: './src/react/main.jsx'
           },
           output: {
             entryFileNames: `[name].js`,
             chunkFileNames: `[name].js`,
             assetFileNames: `[name].[ext]`
           }
         }
       }
     })
   };
   

2. 修改test.html的引入方式：
   在test.html中以ES模块方式直接引入源码入口，Vite开发模式会自动处理编译和热更新：

   <!-- test.html -->
   <script type="module" src="/src/react/main.jsx"></script>
   

方法二：使用监听模式打包

如果需要在开发时直接监听源码变化并打包到dist目录，可以执行以下命令：

vite build --watch

该命令会在每次修改源码后自动重新编译，你只需用HTTP服务器加载dist/OUTPUT/widget下的文件即可。

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