Laravel Vite开发环境PC端正常 移动端无法加载CSS/JS报连接拒绝

你遇到的问题和SSL配置、资源存放目录完全无关，核心是Vite开发服务默认绑定127.0.0.1回环地址导致的：

• PC端访问时，浏览器和Vite、Laravel服务运行在同一台设备上，127.0.0.1指向本机，资源请求可以正常到达Vite服务
• 移动端/平板访问时，页面中注入的资源地址是http://127.0.0.1:3000/xxx，这个地址指向移动设备自身，移动设备上没有运行Vite服务，自然会报连接拒绝错误。

1. 修改Vite配置，允许局域网访问
   打开项目根目录的vite.config.js，添加server配置项，让Vite监听所有网卡地址：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            './public/css/app.css',
            './public/js/app.js',
        ]),
    ],
    server: {
        host: '0.0.0.0',
        port: 3000 // 保持原有端口不变即可
    }
});

2. 配置Laravel侧的Vite服务地址
   打开项目根目录的.env文件，新增配置项，替换为你运行服务的PC的局域网IP（可通过Windows执行ipconfig、macOS/Linux执行ifconfig/ip a查看对应网卡的IPv4地址，常见格式如192.168.1.100）：

VITE_DEV_SERVER_URL=http://你的PC局域网IP:3000

3. 放开防火墙限制
   检查PC的系统防火墙规则，放开3000端口、8000端口（Laravel默认服务端口）的入站访问权限，避免局域网请求被拦截。
4. 重启服务
   终止之前运行的所有服务进程后重新启动：

• 如果你用php artisan serve启动Laravel，需要追加host参数允许局域网访问：

  php artisan serve --host=0.0.0.0
  

• 正常启动Vite服务：

  npm run dev
  

确保移动设备和PC连接到同一个WiFi/局域网后再访问即可。

• 需要指定开发环境IP，即上述配置里的局域网IP，不需要额外配置SSL，开发阶段局域网HTTP访问可以正常工作
• 不需要调整资源文件存放目录，你当前的资源路径配置是正确的
• 如果重启后还是无法加载资源，先在移动端浏览器直接访问http://你的PC局域网IP:3000，能打开Vite的调试页面说明网络连通，否则排查IP是否正确、防火墙是否拦截、设备是否在同一局域网。

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