ViteJS中如何使用index.php替代index.html作为入口文件

Vite 原生不支持直接将 index.php 作为开发服务的入口文件，核心原因是 Vite 开发服务器本身面向静态资源处理设计，不会解析执行PHP代码，但可以通过适配方案实现和CRA + HtmlWebpackPlugin 一致的使用效果，没有必要强行修改框架底层逻辑。

推荐方案：PHP服务前置 + Vite 作为资源构建工具 #

这是生产环境和开发环境都稳定可用的方案，也是Vite官方推荐的和后端服务集成的思路：

• 开发环境配置
  不要直接把Vite开发服务器作为对外的站点服务，本地用常规PHP运行环境（Nginx+PHP-FPM、Apache、PHP内置服务器均可）承接所有请求，负责解析执行index.php的代码逻辑；Vite单独跑在默认端口（一般是5173）作为静态资源服务，提供热更新、源文件编译能力。
  你只需要在index.php里加个环境判断，区分开发/生产环境的资源引入路径即可：

  <!-- 开发环境引入Vite客户端和入口文件 -->
  <?php if (getenv('APP_DEBUG') === true) : ?>
    <script type="module" src="http://localhost:5173/@vite/client"></script>
    <script type="module" src="http://localhost:5173/src/main.jsx"></script>
  <?php else : ?>
    <!-- 生产环境引入构建后的静态资源，路径通过构建流程自动注入 -->
    <?php require_once __DIR__ . '/dist/resource-manifest.php'; ?>
    <link rel="stylesheet" href="<?= $manifest['src/main.jsx']['css'][0] ?>">
    <script type="module" src="<?= $manifest['src/main.jsx']['file'] ?>"></script>
  <?php endif; ?>
  

• 生产构建配置
  保留Vite默认的index.html用于构建时的依赖收集，构建阶段开启manifest配置：

  // vite.config.js
  export default defineConfig({
    build: {
      manifest: true, // 生成资源映射清单
      outDir: 'dist'
    }
  })
  

  构建完成后Vite会生成manifest.json记录所有带hash的产物路径，你可以写个简单的脚本把json转成PHP数组格式存成resource-manifest.php，就能在index.php里动态读取正确的资源路径，不需要手动维护hash后缀。如果不想自己写转换逻辑，也可以直接用社区成熟的后端集成插件自动完成这一步。

不推荐的折中方案：自定义插件让Vite直接返回php文件 #

如果你的index.php里只有少量固定占位逻辑、不需要在开发阶段执行PHP代码，可以写一个极简Vite插件，在访问/index.php路径时读取本地文件内容，交给Vite的HTML处理管道解析里面的script、link标签后返回：

// vite.config.js
const fs = require('fs')
const path = require('path')
export default defineConfig({
  plugins: [
    {
      name: 'php-entry',
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          if (req.url === '/' || req.url.endsWith('.php')) {
            const phpContent = fs.readFileSync(path.resolve(__dirname, 'index.php'), 'utf-8')
            // 交给Vite的HTML转换逻辑处理资源引用
            server.transformIndexHtml(req.url, phpContent).then(html => {
              res.setHeader('Content-Type', 'text/html')
              res.end(html)
            })
            return
          }
          next()
        })
      }
    }
  ]
})

注意：这个方案完全不会执行PHP代码，浏览器收到的是原始PHP文本，只要你的文件里有<?php ?>动态逻辑就会直接报错，仅适合极简单的场景使用，稳定性很差。

不要尝试修改Vite底层源码强行加入PHP解析能力，Vite的整个构建依赖图是基于HTML入口收集的，强行改动会导致热更新失效、资源路径解析错误、构建产物异常等一系列难以排查的问题。

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