如何将Vite构建的React/Vue3应用嵌入传统LAMP网站？

React 实现方案 #

1. 生产构建后嵌入（解决哈希文件名变化问题） #

Vite默认会给构建后的资源添加哈希后缀，用于浏览器缓存优化。要自动匹配这些动态文件名，推荐用以下方式：

• 利用Vite Manifest
  在vite.config.js中开启manifest生成：

  export default {
    build: {
      manifest: true
    }
  }
  

  执行npm run build后，dist目录会生成manifest.json，记录所有资源的哈希文件名。在LAMP的PHP页面中，读取该文件动态生成资源标签：

  <?php
  // 替换为你的dist目录实际路径
  $manifestPath = $_SERVER['DOCUMENT_ROOT'] . '/dist/manifest.json';
  $manifest = json_decode(file_get_contents($manifestPath), true);
  ?>
  <!-- 嵌入到目标DIV内 -->
  <div id="root"></div>
  <!-- 加载CSS -->
  <link rel="stylesheet" href="/dist/assets/<?= $manifest['index.css']['file'] ?>">
  <!-- 加载React应用JS -->
  <script type="module" src="/dist/assets/<?= $manifest['index.js']['file'] ?>"></script>
  

• 固定文件名（不推荐）
  如果不需要缓存优化，可以直接在配置中固定输出文件名：

  export default {
    build: {
      rollupOptions: {
        output: {
          entryFileNames: 'assets/[name].js',
          chunkFileNames: 'assets/[name].js',
          assetFileNames: 'assets/[name].[ext]'
        }
      }
    }
  }
  

  之后直接写死资源路径即可，但会失去哈希缓存的优势。

2. 开发阶段嵌入 #

开发时Vite dev server独立运行，直接在LAMP页面中引入dev server的脚本即可：

<div id="root"></div>
<!-- 引入Vite客户端处理热更新 -->
<script type="module" src="http://localhost:5173/@vite/client"></script>
<!-- 引入React应用入口 -->
<script type="module" src="http://localhost:5173/src/main.jsx"></script>

跨域配置：在vite.config.js中允许LAMP站点域名访问：

export default {
  server: {
    cors: true,
    origin: 'http://your-lamp-domain.com' // 替换为你的LAMP站点域名
  }
}

Vue3 实现方案 #

Vue3基于Vite构建，流程和React完全一致，仅入口容器和文件有区别：

1. 生产构建后嵌入（解决哈希文件名变化问题） #

同样开启manifest：

// vite.config.js
export default {
  build: {
    manifest: true
  }
}

PHP页面动态加载资源：

<?php
$manifestPath = $_SERVER['DOCUMENT_ROOT'] . '/dist/manifest.json';
$manifest = json_decode(file_get_contents($manifestPath), true);
?>
<!-- Vue应用容器 -->
<div id="app"></div>
<link rel="stylesheet" href="/dist/assets/<?= $manifest['index.css']['file'] ?>">
<script type="module" src="/dist/assets/<?= $manifest['index.js']['file'] ?>"></script>

固定文件名的配置和React完全相同，不再重复。

2. 开发阶段嵌入 #

引入dev server脚本，注意Vue入口是main.js：

<div id="app"></div>
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/src/main.js"></script>

跨域配置和React一致，替换为你的LAMP站点域名即可。

通用注意事项 #

• 将dist目录放置到LAMP站点的web根目录下，或配置服务器映射确保资源可访问。
• 开发阶段若需调用LAMP后端API，可在Vite配置中添加proxy代理请求，避免跨域问题：

  export default {
    server: {
      proxy: {
        '/api': {
          target: 'http://your-lamp-domain.com',
          changeOrigin: true
        }
      }
    }
  }
  

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