将index.php设为Vite入口点报错，寻求解决方法

问题背景 #

我用Plain-HTML-Tailwind-Template创建了一个静态项目，默认使用Vite打包。之后因为需要少量PHP代码，将index.html重命名为index.php，修改Vite入口点后出现以下错误：

✓ 0 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (1:0)
file: C:/dev/domain.de/index.php:1:0

当前配置文件 #

vite.config.js #

import { resolve } from "path";
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.php"),
      },
    },
  },
});

tailwind.config.js #

module.exports = {
  content: ["./index.php"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js #

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

package.json（相关部分） #

...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.4",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.23",
    "vite": "^2.9.0"
  }
...

解决方案 #

Vite本质是前端静态资源构建工具，默认不支持解析PHP语法。以下是可行的解决思路：

1. 分离前端与PHP逻辑，保留HTML作为Vite入口 #

• 将index.php改回index.html，继续作为Vite的打包入口（保留Tailwind引用和前端页面结构）。
• 新建独立的index.php文件，在其中添加PHP业务逻辑，并引入Vite打包后的静态资源。示例：

<?php
// 此处编写你的PHP代码
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>你的站点标题</title>
  <!-- 引入Vite打包后的CSS文件 -->
  <link rel="stylesheet" href="/dist/style.css">
</head>
<body>
  <!-- 可直接复制原index.html的页面内容，或通过PHP引入 -->
  <?php include 'dist/index.html'; ?>
  <!-- 引入Vite打包后的JS文件 -->
  <script type="module" src="/dist/main.js"></script>
</body>
</html>

2. 调整Vite配置，适配PHP环境 #

修改vite.config.js，指定打包输出目录并确保资源路径正确：

import { resolve } from "path";
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    outDir: 'dist', // 指定打包产物输出到dist目录
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"), // 改回HTML作为入口
      },
    },
  },
});

运行npm run build后，Vite会将前端资源打包到dist目录，只需在PHP文件中正确引用这些资源即可。

3. 开发环境适配（可选） #

如果需要在开发环境同时使用Vite热更新和PHP服务：

• 启动PHP内置服务器：php -S localhost:8000
• 在Vite配置中添加代理，让前端请求转发到PHP服务器：

export default defineConfig({
  server: {
    proxy: {
      '/api': { // 假设PHP接口路径以/api开头
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
});

这样开发时既能享受Vite的热更新，又能正常访问PHP接口。

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