Vue + Apache二级目录配置

在对Vue项目进行部署上线的时候，一般都会直接部署在域名上，例如：xiaoyes.cn。假设现在该项目的后台管理系统也需要进行上线，那么你可能会想到部署在admin.xiaoyes.cn，这种方式是可行的。

但是如果有多个后台管理系统应该怎么部署呢，难道要：xxx1-admin.xiaoyes.cn、xxx2-admin.xiaoyes.cn、xxx3-admin.xiaoyes.cn…显然这种方式不够优雅，可以将项目部署在xiaoyes.cn/admin或者xxx.xiaoyes.cn/admin上面，这种方式既优雅也减少了二级域名的数量。

一、Vue项目配置

这里我使用的是Vite + Vue3 ，在vite.config.js内配置：

export default defineConfig({
  // 这里的admin就是二级目录的地址，xiaoyes.cn/admin
  base: "/admin"
})

二、Apache配置

httpd.conf

<VirtualHost *>
    // 域名
    ServerName xiaoyes.cn
    // 需要代理的地址以及前端项目编译打包后的静态资源文件夹
    Alias /admin "/home/admin//"
    // 反向代理(非必须)
    ProxyPass /api/ http://127.0.0.1:9002/
</VirtualHost>

/home/admin/.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^admin$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /admin/index.html [L]
</IfModule>