新建Laravel/Jetstream/Inertia项目白屏显示@vite指令如何解决

全新默认安装的项目出现该问题，按以下顺序排查即可解决：

• 安装前端依赖
  项目创建完成后第一次运行，必须先在项目根目录安装npm依赖包，执行命令：
  npm install
  跳过这一步后续所有Vite相关逻辑都无法正常运行。
• 启动Vite开发服务
  Laravel 9及以上版本默认用Vite做资源打包，它和PHP内置服务是两个独立进程，必须新开一个终端窗口（不要关闭正在运行php artisan serve的终端），在项目根目录执行：
  npm run dev
  终端显示Vite启动成功（默认监听5173端口）后，刷新浏览器页面就能正常渲染，不会再显示@vite原始文本。
• 异常兜底处理
  如果做完前两步还是有问题，依次执行以下操作：
  1. 清除Blade模板编译缓存，执行命令：
     php artisan view:clear
  2. 核对根目录下vite.config.js为默认生成的配置，确认入口文件路径（resources/js/app.js、resources/css/app.css）没有被改动，且已经正确引入Laravel Vite插件。
  3. 如果是生产环境部署，不需要启动Vite开发服务，直接执行生产构建命令生成静态资源：
     npm run build
     命令执行完成后public目录下会生成build资源目录，此时直接访问PHP服务即可正常加载页面。
• 特殊环境适配
  如果使用WSL2、Homestead、远程云服务器做开发环境，需要在vite.config.js的配置里添加服务监听配置，允许外部地址访问Vite服务，否则资源加载失败也会导致解析异常，配置示例：

  export default defineConfig({
      plugins: [laravel({
          input: ['resources/css/app.css', 'resources/js/app.js'],
          refresh: true,
      }), vue({
          template: {
              transformAssetUrls: {
                  base: null,
                  includeAbsolute: false,
              },
          },
      })],
      // 新增以下服务监听配置
      server: {
          host: '0.0.0.0',
          port: 5173,
      },
      resolve: {
          alias: {
              '@': '/resources/js',
          },
      },
  });
  

开发环境调试时必须同时保持php artisan serve和npm run dev两个进程处于运行状态，关闭任意一个都会导致页面访问异常。

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