【配置xampp反向代理方法】vue3-element-admin 框架打包时遇到的问题及解决方法记录（引用静态文件js/css爆红404，部署后请求跨域api接口404）

1. 打包部署在xampp上报错： GET http://localhost/js/index.8n3J6cW3.js net::ERR_ABORTED 404 (Not Found)

引用静态文件报错，以前用vue2-element-admin打包时也遇到过，搜索该报错也都是解决webpack配置publicPath。而现在有来的vue3-element-admin 使用vite。

解决方法

在 Vite 中配置公共路径（类似于 Webpack 中的 publicPath）可以通过 base 选项来实现。base 选项指定了项目在服务器上的基础路径，用于所有的资源引用。以下是配置方法：

/** 参考Vite官方配置: https://cn.vitejs.dev/config */
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd());
  return {
    resolve: {
      alias: {
        "@": pathSrc,
      },
    },
    base: "./",
    css: {
      // CSS 预处理器

保存配置文件，并重新启动 Vite 服务器。现在项目中所有的资源引用都将基于指定的基础路径进行解析。
此时，项目页面可以正常加载。
该方法是在有来给出的框架说明文章中的评论里找到的：

Vue3 + Vite + TypeScript + Element-Plus：从零到一构建企业级后台管理系统（前后端开源）

2. 打包部署在xampp上，请求api接口一直报错404，已排除接口可正常使用，本地运行时也可正常请求。

其实查看文档中的 项目部署 部分就知道了，需要配置服务器反向代理。但是本地测试中用的xampp该怎么修改呢？

XAMPP中配置反向代理

在XAMPP中配置反向代理可以通过修改Apache的配置文件来实现。

1. 打开Apache的配置文件（如果不会打开可以看文章末尾）： 在XAMPP安装目录中找到Apache的配置文件 httpd.conf，通常位于 xampp\apache\conf 目录下。
2. 启用代理模块： 确保 httpd.conf 文件中加载了 mod_proxy 和 mod_proxy_http 模块。你可以搜索文件中是否有类似以下内容的行，如果前面有 # 符号，就去掉注释使其生效

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

3. 配置反向代理【两种方法】

第一种 ：在 httpd.conf 文件中添加以下类似的配置来设置反向代理

ProxyRequests Off
ProxyPass "/prod-api/" "http://vapi.youlai.tech/"

第二种： 在XAMPP安装目录中找到Apache的虚拟主机配置文件。通常位于 xampp\apache\conf\extra 目录下，文件名是 httpd-vhosts.conf。
打开 httpd-vhosts.conf 文件（如果不会打开可以看文章末尾），并在文件末尾添加类似以下内容的配置：
！！记得"C:/xampp/htdocs"改成自己xampp的安装路径。

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "C:/xampp/htdocs"
    <Directory "C:/xampp/htdocs">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>

    ProxyPass "/prod-api/" "http://vapi.youlai.tech/"
</VirtualHost>

4. 重启Apache服务器： 保存并关闭 httpd.conf 文件，然后重新启动XAMPP中的Apache服务器，以使配置生效。
5. 检查配置是否生效： 访问XAMPP上的网站，并尝试使用反向代理设置的路径来访问后端服务。确保请求被正确代理到指定的后端服务。

完成以上步骤，重新进入页面可以正常加载并请求api。

打开.conf文件

使用cmd管理员权限，或者powershell管理员权限
记得改成自己xampp安装路径

notepad C:\xampp\apache\conf\extra\httpd-vhosts.conf
notepad C:\xampp\apache\conf\httpd.conf