开发模式下Laravel中@vite指令生成无效路径的问题排查

你的问题核心是Vite默认绑定了IPv6的::1地址，但你本地访问站点用的是IPv4（比如localhost或127.0.0.1），导致资源链接不匹配，无法加载样式和触发热重载。以下是几种解决方法：

• 修改package.json的dev命令
  打开项目根目录的package.json，把dev命令改成绑定IPv4地址：

  "scripts": {
      "dev": "vite --host 127.0.0.1",
      "build": "vite build"
  }
  

  保存后重启npm run dev，此时生成的资源链接会变成http://127.0.0.1:5174/...，和本地访问地址一致，就能正常加载样式和热重载了。

• 配置vite.config.js指定host
  在项目根目录的vite.config.js中添加server的host配置：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      server: {
          host: '127.0.0.1',
      },
      plugins: [
          laravel({
              input: ['resources/css/app.css'],
              refresh: true,
          }),
      ],
  });
  

  同样重启npm run dev即可生效。

• 验证访问地址一致性
  确保你访问本地站点的地址（比如http://127.0.0.1:8000）和Vite生成的资源地址的主机部分一致，避免IPv4和IPv6地址不匹配导致的连接问题。

内容的提问来源于stack exchange，提问作者Иван