Vite React项目：index.html放src目录是否合理？如何移至public？

1. index.html放在src目录是否规范？ #

Vite官方React模板默认把index.html放在项目根目录，而非src文件夹里。把它放在src目录并不属于Vite的规范实践：

• Vite的核心设计就是把index.html作为应用的入口，放在根目录能直接被开发服务器访问，还能在HTML里直接引用src内的模块（比如<script type="module" src="/src/main.jsx"></script>），借助Vite的模块解析能力实现热更新和按需编译。
• 放到src目录会打破Vite的默认目录约定，不仅要额外配置，还容易在团队协作时造成结构混乱。

2. 如何把index.html迁移到public目录（模拟create-react-app结构） #

如果你想沿用create-react-app的目录结构（public下放index.html），按以下步骤来：

• 第一步：移动文件
  把src里的index.html剪切到项目根目录新建的public文件夹（没有的话直接创建）。
• 第二步：调整资源引用路径
  因为现在HTML在public目录，要修改里面指向src模块的路径，回退到根目录找src：

  <!-- 原来的写法 -->
  <script type="module" src="/src/main.jsx"></script>
  <!-- 修改后 -->
  <script type="module" src="../src/main.jsx"></script>
  

• 第三步：配置Vite识别新入口
  在项目根目录的vite.config.js里指定入口文件路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    build: {
      rollupOptions: {
        input: './public/index.html'
      }
    }
  })
  

• 第四步：验证开发服务
  运行npm run dev，确认应用能正常启动、热更新没问题。

3. 打包后如何把index.html移到public目录 #

Vite默认打包后，index.html会直接生成在dist根目录。要把它移到dist/public，有两种简单方案：

方案1：用打包脚本自动移动 #

修改package.json里的build命令，加上打包后的移动操作：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build && mkdir -p dist/public && mv dist/index.html dist/public/",
    "preview": "vite preview"
  }
}

运行npm run build后，index.html会自动被移到dist/public，其他静态资源还留在dist根目录。

方案2：通过Vite配置指定输出路径 #

如果想直接通过配置生成到目标目录，修改vite.config.js的rollup输出配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: './public/index.html',
      output: {
        // 把非HTML资源输出到dist/assets目录
        assetFileNames: 'assets/[name].[hash][extname]',
        chunkFileNames: 'assets/[name].[hash].js',
        entryFileNames: 'assets/[name].[hash].js',
        // 把HTML文件输出到dist/public目录
        dir: 'dist/public'
      }
    }
  }
})

注意：这个配置会把所有打包产物（包括静态资源）都放到dist/public里，如果要分开存放静态资源和HTML，推荐用方案1。

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