Laravel 9远程服务器Vite运行异常，求有效解决办法

问题 #

在已配置域名和SSL的远程服务器（非本地环境、未使用Docker）部署Laravel 9，并安装Breeze和React后，运行npm run dev页面无内容显示，浏览器控制台出现以下错误：

GET https://[::]:5173/@vite/client net::ERR_ADDRESS_INVALID
GET https://[::]:5173/resources/js/app.jsx net::ERR_ADDRESS_INVALID
GET https://[::]:5173/@react-refresh net::ERR_ADDRESS_INVALID

已尝试以下方案但均无效：

• 在.env文件中添加ASSET_URL
• 在vite.config.js中配置：

server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost'
        }
    },

• 运行命令npm run dev -- --host APPURL（APPURL为项目实际域名）

需解决上述问题，或了解Laravel 9中不使用Vite集成React的方法。

解决方案 #

一、修复Vite远程服务器配置问题 #

1. 完善vite.config.js配置
   由于服务器已配置SSL，需明确指定域名、端口及SSL证书路径，示例配置如下：

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: 'resources/js/app.jsx',
               refresh: true,
           }),
           react(),
       ],
       server: {
           host: '你的服务器域名', // 替换为实际域名，如example.com
           port: 5173,
           hmr: {
               host: '你的服务器域名',
               protocol: 'wss', // 适配SSL的WebSocket协议
           },
           https: {
               key: '/绝对路径/到/服务器私钥.key',
               cert: '/绝对路径/到/服务器证书.crt',
           },
       },
   });
   

   注意：证书路径需使用服务器上的绝对路径，确保Vite有权限读取。

2. 修正.env中的APP_URL
   确保.env里的APP_URL为带HTTPS的完整域名：

   APP_URL=https://your-domain.com
   

3. 重启Vite服务
   终止当前npm run dev进程，重新运行：

   npm run dev
   

   此时Vite会绑定到指定域名与SSL端口，浏览器可正常加载资源。

二、替换Vite为Laravel Mix（不使用Vite集成React） #

若不想使用Vite，可降级为Laravel Mix，步骤如下：

1. 移除Vite相关依赖

   npm remove vite laravel-vite-plugin @vitejs/plugin-react
   

2. 安装Laravel Mix及React依赖

   npm install laravel-mix@^6.0 react react-dom @babel/preset-react --save-dev
   

3. 创建webpack.mix.js配置文件
   在项目根目录新建webpack.mix.js，内容如下：

   const mix = require('laravel-mix');
   
   mix.js('resources/js/app.jsx', 'public/js')
      .react()
      .sass('resources/sass/app.scss', 'public/css');
   

4. 修改Blade模板的资源引入
   将原Vite引入代码：

   @vite(['resources/js/app.jsx', 'resources/sass/app.scss'])
   

   替换为Mix的引入方式：

   <script src="{{ mix('js/app.js') }}"></script>
   <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   

5. 编译资源
   开发模式实时编译：

   npm run watch
   

   生产模式打包：

   npm run prod
   

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