在Apache部署的Moodle应用中嵌入Vite构建的React应用出现空白页及资源404问题求助

看起来你遇到的核心问题是Vite生成的资源路径错误，再加上Apache配置里的规则冲突，才导致了空白页和404报错。我帮你拆解一下问题，分开发模式和生产模式两种场景给出针对性的解决方案：

一、先修正Vite的基础路径配置 #

不管是开发还是生产，Vite都需要明确自己的部署根路径是/react/，这是解决资源路径错误的核心。修改你的vite.config.js：

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

export default defineConfig({
  plugins: [react()],
  base: '/react/', // 新增：指定React应用的部署基础路径
  build: {
    outDir: 'build',
  },
  server: {
    port: 3000,
    host: true,
    origin: 'https://moodleapp/react' // 开发模式下，让Vite生成的资源链接指向正确的域名+路径
  }
});

另外，Vite并不依赖package.json里的homepage字段，你可以把它删掉，避免混淆。

二、调整Apache配置：解决规则冲突 #

你当前的Apache配置同时对/react设置了Alias和ProxyPass，这两个规则会冲突（ProxyPass优先级更高），所以需要根据使用场景二选一：

场景1：生产模式（部署打包后的静态文件） #

如果你已经执行了yarn build，要部署build目录的静态文件，那么删除ProxyPass相关配置，只保留静态资源的Alias规则：

<VirtualHost ipserver:443>
ServerAdmin moodleapp@domain.com
ServerName moodleapp
DocumentRoot /var/www/moodleapp
ErrorLog ${APACHE_LOG_DIR}/upficerror.log
CustomLog ${APACHE_LOG_DIR}/upficaccess.log combined
SSLEngine on
SSLCertificateFile /etc/ssl/certs/aula/moodleapp.crt
SSLCACertificateFile /etc/ssl/certs/aula/moodleapp.ca
SSLCertificateKeyFile /etc/ssl/certs/aula/moodleapp.key

<FilesMatch "\.(cgi|shtml|phtml|php)$">
SSLOptions +StdEnvVars
</FilesMatch>
<Directory /usr/lib/cgi-bin>
SSLOptions +StdEnvVars
</Directory>

<Directory /var/www/moodleapp/>
Options -Indexes
Order allow,deny
Allow from all
</Directory>

# React生产构建的配置
Alias /react /var/www/moodleapp/react/build
<Directory /var/www/moodleapp/react/build>
Options -Indexes
Order allow,deny
Allow from all
DirectoryIndex index.html
FallbackResource /react/index.html # 支持React路由的SPA刷新
</Directory>

# 以下配置请删除（生产模式不需要暴露src目录，也不需要代理到开发服务器）
# <Location /react>
# ProxyPass http://localhost:3000
# ProxyPassReverse http://localhost:3000
# </Location>
# <Directory /var/www/moodleapp/react/src>
# Options -Indexes
# Order allow,deny
# Allow from all
# </Directory>
# Alias /react/src /var/www/moodleapp/react/src
</VirtualHost>

然后把.htaccess移动到/var/www/moodleapp/react/build目录下（生产模式只需要部署build目录），并修改内容：

RewriteEngine On
RewriteBase /react/ # 改为/react/，匹配部署路径
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /react/index.html [L]

最后执行yarn build，重启Apache，清空浏览器缓存后访问https://moodleapp/react即可。

场景2：开发模式（使用Vite热更新） #

如果是开发阶段需要实时调试，那么保留ProxyPass配置，删除Alias规则，让请求转发到Vite开发服务器：

<VirtualHost ipserver:443>
# 其他配置保持不变...

# 删除以下静态资源配置
# Alias /react /var/www/moodleapp/react/build
# <Directory /var/www/moodleapp/react/build>
# ...
# </Directory>

# 只保留代理规则，注意目标路径要加上/react
<Location /react>
ProxyPass http://localhost:3000/react
ProxyPassReverse http://localhost:3000/react
</Location>
</VirtualHost>

启动Vite开发服务器（yarn start），重启Apache后，访问https://moodleapp/react就能正常加载，并且支持热更新功能。

三、额外注意事项 #

• 生产模式下绝对不要暴露src目录，避免代码泄露和安全风险。
• 如果你的React应用使用了路由（比如React Router），生产模式下的FallbackResource配置必须正确，确保刷新页面时不会出现404。
• 每次修改配置后，记得重启Apache并清空浏览器缓存，避免旧缓存导致的问题。

备注：内容来源于stack exchange，提问作者Ander Canales Medina