Laravel本地开发包的Vite配置方案及报错排查咨询

错误原因 #

1. 路径解析错误：Vite配置的input路径基于Laravel项目根目录，你填写的vendor_name/package_name/...指向vendor目录下的软链接文件，但Vite无法正确解析软链接路径，需使用包的实际本地存储路径（比如项目根目录下的packages/vendor_name/package_name）。
2. Input参数误用：input字段仅需传入CSS/JS等资源文件，视图文件（Blade）不应放在这里，需通过refresh选项指定监听刷新的视图文件。

正确配置步骤 #

1. 修正Vite配置文件（vite.config.js） #

假设本地包存储在Laravel项目根目录的packages/vendor_name/package_name目录下（路径不同请自行调整）：

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

export default defineConfig({
    plugins: [
        laravel({
            buildDirectory: 'vendor_name/package_name',
            input: [
                // 指向包的实际本地资源路径
                'packages/vendor_name/package_name/resources/css/app.css',
                // 如有JS资源可添加
                // 'packages/vendor_name/package_name/resources/js/app.js',
            ],
            refresh: [
                // 监听包的视图文件，实现热刷新
                'packages/vendor_name/package_name/resources/views/**/*.blade.php',
                // 保留主项目视图监听
                'resources/views/**/*.blade.php',
            ],
        }),
    ],
});

2. 修正Blade视图中的Vite调用 #

在包的index.blade.php中，使用正确的入口点路径：

{{ Vite::useBuildDirectory('vendor_name/package_name')
    ->withEntryPoints(['packages/vendor_name/package_name/resources/css/app.css']) }}

或使用更简洁的@vite指令：

@vite(['packages/vendor_name/package_name/resources/css/app.css'], 'vendor_name/package_name')

3. 验证路径有效性 #

执行构建或开发命令前，先确认路径正确：

• Linux/macOS：在项目根目录执行 ls packages/vendor_name/package_name/resources/css/app.css
• Windows：执行 dir packages\vendor_name\package_name\resources\css\app.css
  确保文件存在。

全局/局部使用Vite的说明 #

你无需在包目录内单独配置Vite，直接在Laravel主项目中全局配置即可管理包的资源：

• 开发阶段：主项目的Vite服务会监听包的资源和视图变化，实现热刷新。
• 构建阶段：资源会被打包到public/build/vendor_name/package_name目录，与主项目资源分离，避免冲突。
• 这种方式契合Laravel生态流程，无需在包内单独维护依赖和配置。

额外注意事项 #

• 确保Composer正确链接本地包：在Laravel项目的composer.json中添加仓库配置：

  "repositories": [
      {
          "type": "path",
          "url": "./packages/vendor_name/package_name"
      }
  ]
  

• 执行composer require vendor_name/package_name安装本地包，确保vendor目录下的包是指向本地开发目录的软链接。

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