如何在XAMPP中配置带Vite和Livewire的Laravel 10.x虚拟主机并免命令运行

一、配置Apache虚拟主机（替代php artisan serve） #

1. 修改系统hosts文件
   打开C:\Windows\System32\drivers\etc\hosts（需管理员权限），添加一行：

   127.0.0.1 your-project.test
   

   把your-project.test换成你想用的本地自定义域名。

2. 配置Apache虚拟主机
   打开XAMPP目录下的apache/conf/extra/httpd-vhosts.conf，添加以下配置：

   <VirtualHost *:80>
       DocumentRoot "C:/xampp/htdocs/你的Laravel项目路径/public"
       ServerName your-project.test
       <Directory "C:/xampp/htdocs/你的Laravel项目路径/public">
           AllowOverride All
           Require all granted
       </Directory>
   </VirtualHost>
   

   替换DocumentRoot和Directory里的项目实际路径，ServerName保持和hosts文件里的域名一致。

3. 启用虚拟主机配置
   打开apache/conf/httpd.conf，找到#Include conf/extra/httpd-vhosts.conf，去掉前面的#注释，然后重启XAMPP的Apache服务。

4. 更新项目.env配置
   打开Laravel项目根目录的.env文件，修改：

   APP_URL=http://your-project.test
   

   确保和你设置的域名一致。

二、处理Vite前端资源（替代npm run dev） #

方式1：编译生产环境资源（无需实时编译）

直接运行：

npm run build

Vite会把所有前端资源（包括Livewire相关）编译到public/build目录，Laravel的@vite指令会自动加载这些编译后的静态文件，之后访问虚拟主机域名即可正常加载前端内容。

方式2：开启监听模式（实时编译，无需手动重新build）

如果需要实时修改前端代码并自动编译，修改项目根目录的package.json，在scripts里添加watch命令：

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "watch": "vite build --watch"
}

然后运行：

npm run watch

这个命令会在后台监听前端文件变化，自动重新编译资源。如果不想一直开着终端，Windows可以用start /min npm run watch让它后台运行，Linux/macOS用npm run watch &。

三、Livewire相关检查 #

确保你的vite.config.js正确集成了Livewire插件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import livewire from '@defstudio/vite-plugin-livewire';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        livewire(),
    ],
});

如果之前没装这个插件，先运行npm install @defstudio/vite-plugin-livewire --save-dev安装。

做完以上步骤，你就可以直接通过http://your-project.test访问网站，无需再运行php artisan serve或npm run dev命令。

内容的提问来源于stack exchange，提问作者bryxjam