开发模式下如何让Vite输出main.js而非main.jsx？

直接修改引用路径（最简单） #

既然你的React项目默认入口是src/main.jsx，直接把Flask模板里的script标签改成：

<script type="module" src="http://localhost:5173/src/main.jsx"></script>

注意加上src/前缀，Vite开发服务器默认从项目根目录提供文件，指定源码目录下的入口就能正常加载。如果需要热更新等开发特性，还可以额外引入Vite的客户端脚本：

<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/src/main.jsx"></script>

统一入口文件名（贴合文档示例） #

如果想沿用文档里的main.js引用方式，有两种操作：

1. 重命名入口文件：直接把src/main.jsx改名为src/main.js，Vite的React插件会自动解析JSX语法，不影响功能。
2. 配置Vite别名映射：在vite.config.js中添加别名，让main.js指向你的main.jsx：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         './main.js': './src/main.jsx'
       }
     }
   });
   

   改完配置重启Vite开发服务器，就能用http://localhost:5173/main.js访问入口了。

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