XAMPP配置多端口运行Vue打包后的项目

在本地开发环境中，经常需要同时运行多个前端项目进行联调测试。XAMPP作为一款集成了Apache、MySQL和PHP的本地开发环境工具，默认配置下通常只监听80端口。当我们将Vue项目打包后，如果希望多个项目能同时通过不同端口访问，就需要对XAMPP的Apache配置进行调整。本文将以实际操作为例，详细讲解如何让XAMPP支持多端口运行不同的Vue打包项目。

一、修改Apache主配置文件开启多端口监听

要让XAMPP支持多端口访问，首先需要让Apache监听我们指定的端口号。XAMPP的配置文件通常位于安装目录下的apache\conf文件夹中，我们需要找到httpd.conf文件进行修改。默认情况下，Apache只配置了Listen 80这一行，表示监听80端口。我们可以根据需要添加更多端口，比如8081、8082等。

打开httpd.conf文件后，搜索Listen关键字，你会看到类似Listen 80的配置。在这个配置下方，我们可以添加新的端口监听指令。需要注意的是，如果服务器绑定了特定IP，也可以写成Listen 127.0.0.1:8081的形式，这样更加安全，只允许本机访问该端口。添加完端口后，保存文件并重启Apache服务，此时这些端口就已经处于监听状态了。

# httpd.conf 配置示例
Listen 80
Listen 8081
Listen 8082
Listen 8083

修改完成后，建议通过XAMPP控制面板重启Apache服务。如果端口被其他程序占用，Apache将无法启动，此时需要检查系统端口占用情况。在Windows系统中可以通过netstat -ano | findstr :8081命令查看指定端口是否被占用，如果被占用则需要更换端口号或者结束占用该端口的进程。

二、配置虚拟主机映射不同项目目录

仅仅让Apache监听端口是不够的，我们还需要告诉Apache当某个端口收到请求时，应该去哪个目录读取文件。这就需要配置虚拟主机。XAMPP的虚拟主机配置通常在extra/httpd-vhosts.conf文件中，该文件同样位于apache\conf目录下。在修改虚拟主机配置前，需要确保httpd.conf中已经加载了vhosts模块，搜索httpd-vhosts.conf，去掉前面的注释符号即可。

在httpd-vhosts.conf文件中，我们可以为每个端口添加一个VirtualHost配置块。每个配置块需要指定端口号、服务器名称、文档根目录等信息。对于Vue打包后的项目，文档根目录应该指向打包生成的dist文件夹。这里有一个关键点需要注意：Vue项目打包后通常使用history路由模式，这会导致刷新页面时出现404错误，因此需要在虚拟主机配置中添加URL重写规则。

# httpd-vhosts.conf 配置示例
<VirtualHost *:8081>
    ServerName localhost
    DocumentRoot "C:/xampp/htdocs/vue-project-1/dist"
    <Directory "C:/xampp/htdocs/vue-project-1/dist">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
        # Vue Router history模式重写规则
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </Directory>
</VirtualHost>

<VirtualHost *:8082>
    ServerName localhost
    DocumentRoot "C:/xampp/htdocs/vue-project-2/dist"
    <Directory "C:/xampp/htdocs/vue-project-2/dist">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </Directory>
</VirtualHost>

在上面的配置中，我们为8081和8082端口分别指定了不同的文档根目录。每个目录配置块中都启用了AllowOverride All，这允许项目目录下的.htaccess文件覆盖服务器配置。同时添加了RewriteEngine规则，将所有非文件和非目录的请求重写到index.html，这样Vue Router的history模式就能正常工作了。配置完成后，同样需要重启Apache服务使配置生效。

三、解决跨域请求与资源路径问题

当多个Vue项目运行在不同端口时，浏览器会认为它们属于不同的源，这就可能引发跨域问题。如果项目A需要调用项目B的接口，就需要在项目B的Apache配置中添加跨域响应头。可以在对应的Directory配置块中添加Header set Access-Control-Allow-Origin指令，允许特定来源的跨域请求。需要注意的是，生产环境中应该严格限制允许的来源，不要使用通配符星号。

另一个常见问题是资源路径错误。Vue项目打包时默认使用绝对路径，如果部署在非根目录下，可能会导致CSS和JS文件加载失败。解决这个问题的方法是在打包前修改vue.config.js文件中的publicPath配置。如果项目直接部署在端口根目录下，可以设置为斜杠；如果部署在子目录下，则需要设置为对应的子路径。修改完成后重新打包项目，再部署到XAMPP中即可正常访问。

// vue.config.js 配置示例
module.exports = {
  // 部署在端口根目录下使用 '/'
  publicPath: '/',
  // 或者部署在子目录下使用对应路径
  // publicPath: '/my-app/',
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true
      }
    }
  }
}

除了上述配置外，还需要注意XAMPP的防火墙设置。如果在局域网内需要让其他设备访问这些端口，需要在Windows防火墙中添加入站规则，允许Apache程序通过指定端口通信。同时，如果项目使用了HTTPS，还需要配置SSL证书和监听443端口的变体端口。通过以上步骤的完整配置，我们就能在XAMPP中实现多端口运行不同的Vue打包项目，极大提升本地开发和测试的效率。在实际操作过程中，建议每修改一个配置就重启一次Apache并测试，这样更容易定位问题所在。

XAMPP多端口配置Vue项目部署Apache虚拟主机修改时间：2026-08-20 17:26:53