Laravel Nova自定义工具、字段、过滤器热重载问题求助

问题概述 #

• Laravel Nova搭配Laravel Mix时，npm run hot无法正常运行，只能使用npm run watch，每次代码修改后需手动刷新页面，CSS调试体验极差
• 尝试迁移至Vite，但因Nova架构特殊性，在nova-components目录下执行热重载命令仍无效，迁移未成功

针对性解决方案尝试 #

调整Laravel Mix配置适配Nova #

• 在Nova组件的webpack.mix.js中明确配置热重载参数，适配Nova的组件结构：

  mix.js('resources/js/components/YourNovaComponent.vue', 'dist/js')
     .sass('resources/sass/components/YourNovaComponent.scss', 'dist/css')
     .webpackConfig({
         devServer: {
             hot: true,
             watchOptions: {
                 ignored: /node_modules/,
                 poll: 1000 // 针对部分文件系统无法自动触发监听的场景启用轮询
             }
         }
     });
  

• 同步更新Nova组件package.json的脚本命令：

  "scripts": {
      "hot": "mix watch --hot"
  }
  

适配Nova架构完成Vite迁移 #

• 在nova-components目录下创建vite.config.js，配置Vite识别Nova组件资源：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: [
                  'resources/js/components/YourNovaComponent.js',
                  'resources/sass/components/YourNovaComponent.scss'
              ],
              refresh: true,
          }),
          vue(),
      ],
      server: {
          host: 'localhost',
          port: 5173,
          hmr: {
              host: 'localhost'
          }
      }
  });
  

• 更新Nova组件package.json的脚本为Vite命令：

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

• 修改Nova组件视图文件中的资源引用，替换为Vite指令：

  @vite(['resources/js/components/YourNovaComponent.js', 'resources/sass/components/YourNovaComponent.scss'])
  

服务端与缓存排查 #

• 确保Laravel项目.env文件中的APP_URL与热重载服务器地址一致
• 清除Nova相关缓存：

  php artisan nova:clear-cache
  php artisan view:clear
  

内容的提问来源于stack exchange，提问作者Mohammed A. Fawzi