Apache 部署单页应用时怎么用 DocumentRoot 指定打包后的 dist 目录-Apache-PHP中文网

apache部署vue等单页应用时，documentroot指向dist目录仅提供静态文件服务，必须配合mod_rewrite重写规则——当请求非真实文件或目录时，统一fallback至index.html，由前端路由接管，否则刷新页面将返回404。

apache 部署单页应用时怎么用 documentroot 指定打包后的 dist 目录

Apache 部署单页应用（如 Vue、React）时，用 DocumentRoot 指向打包后的 dist 目录，本质是让 Apache 把这个目录当作网站根路径来服务静态文件。但单页应用有特殊要求：前端路由（如 /user/profile）不对应真实文件，需由 index.html 统一接管，否则刷新页面会返回 404。

必须配合重写规则，否则无法正常跳转

Apache 默认按文件系统路径匹配请求，找不到对应 .html 文件就返回 404。而单页应用所有路由都应 fallback 到 index.html，这需要启用 mod_rewrite 并配置 .htaccess 或 <directory></directory> 内的重写逻辑。

正确设置 DocumentRoot 的关键步骤

确保 dist 目录路径为绝对路径，例如 /var/www/my-vue-app/dist
在 <virtualhost></virtualhost> 或主配置中声明 DocumentRoot，并紧随其后配好同路径的 <directory></directory> 块
启用 AllowOverride All，让 dist/.htaccess 能生效（或直接在 <directory></directory> 中写重写规则）
开启 mod_rewrite：sudo a2enmod rewrite（Debian/Ubuntu）或确保 LoadModule rewrite_module modules/mod_rewrite.so 已启用（RHEL/CentOS）

推荐的 VirtualHost 配置示例

<virtualhost>
    ServerName myapp.local
    DocumentRoot "/var/www/my-vue-app/dist"

    <directory>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </directory>

    ErrorLog ${APACHE_LOG_DIR}/myapp_error.log
    CustomLog ${APACHE_LOG_DIR}/myapp_access.log combined
</virtualhost>

dist 目录下必须包含 .htaccess 文件

Apache Superset Dashboard and SQL Exploration Skill

Apache Superset 是一个广泛采用的开源 BI 平台，用于 SQL 探索、图表构建和仪表板交付。当代理需要查询仓库数据、组装仪表板或使用成熟的分析界面解释指标而不是临时笔记本代码时，此技能非常有用。

下载

内容如下（适配 Apache 2.4+）：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

这条规则的意思是：如果请求的不是真实存在的文件（!-f）也不是真实存在的目录（!-d），就一律重写到 /index.html，由前端路由接管。

权限与路径检查不能跳过

确认 Apache 进程用户（如 www-data）对 /var/www/my-vue-app/dist 及所有父目录有执行权限（x）：
ls -ld /var/www /var/www/my-vue-app /var/www/my-vue-app/dist
若缺执行位，补上：sudo chmod +x /var/www/my-vue-app（不要 chmod 777）
SELinux 环境需校准上下文：sudo semanage fcontext -a -t httpd_sys_content_t "/var/www/my-vue-app/dist(/.*)?"，再 sudo restorecon -Rv /var/www/my-vue-app/dist