在Laravel软件包中注册vue组件

我一直在努力在自己为laravel开发的测试包中注册vue组件。我甚至检查了laravel\horizon和其他一些软件包，但我不知道该怎么做。我在跟踪

所以我的软件包在我的Laravel应用程序之外。我的包结构如下：

vendor
    packagename
        resources
            js
                components
                    examplecomponent.vue
                app.js
        AppServiceProvide.php
        package.json
        webpack.mix.js

mix
  .options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  })
  .setPublicPath("public")
  .js("resources/js/app.js", "public")
  .version()
  .webpackConfig({
    resolve: {
      symlinks: false,
      alias: {
        "@": path.resolve(__dirname, "resources/js/")
      }
    },
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  });

<script src="{{asset(mix('app.js', 'vendor/packagename'))}}"></script>

对于vue组件，这只是Laravel的例子，对于app.js，基本上没有任何改变，因为它只是用于测试目的。 我尝试使用“vendor:publish”命令将vue组件复制到resources\js\components，但它仍在复制，但尚未在app.js中注册。

---

所以问题是，在Laravel软件包或供应商中注册vue组件的最佳方式是什么？Laravel Horizon软件包如何注册其组件，我确实检查了Laravel/Horizon的所有源代码。没有类似“npm run”或复制组件并将其添加到主应用程序的某个位置的命令，这就像npm正在检查供应商文件，搜索Laravel/Horizon中的package.json文件，然后注册组件。如果我的vue组件未注册的原因是这样的话。

没有最佳做法，但如果您想以最简单的方式进行注册，可以这样做：

const components = require.context('./components', true, /\.vue$/i);
components.keys().map((key) => {
  return Vue.component(`${key.split('/').pop().split('.')[0]}-component`, components(key).default)
});

在

resources/js

下的

components

目录中找到的任何文件（第二个参数为

require.context

）都将自动添加为

Vue组件

，并在末尾添加

-component

因此，您只需运行

vendor:publish

，您的组件就会自动显示在那里。如果您正在运行

纱线观察

或

纱线热

，则它们也将在发布时自动注册

---

之所以这样做，是因为我们告诉webpack创建一个与给定目录中的表达式相匹配的

上下文。您可以阅读更多有关拉威尔地平线的信息。
拉威尔地平线方式：

因此，在阅读了Laravel Horizon的全部代码后，我可以理解如下所示：

vendor
    packagename
        resources
            js
                components
                    examplecomponent.vue
                app.js
        AppServiceProvide.php
        package.json
        webpack.mix.js

mix
  .options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  })
  .setPublicPath("public")
  .js("resources/js/app.js", "public")
  .version()
  .webpackConfig({
    resolve: {
      symlinks: false,
      alias: {
        "@": path.resolve(__dirname, "resources/js/")
      }
    },
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  });

<script src="{{asset(mix('app.js', 'vendor/packagename'))}}"></script>

1-首先要注册vue组件，如Laravel，例如app.js中的组件。因此，您必须在Resources\js中为您的Laravel软件包制作自己的app.js：

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

2-秒，在包的根目录中创建webpack.mix.js文件，并将app.js复制到public\vendor\packagename\中，如下所示：

vendor
    packagename
        resources
            js
                components
                    examplecomponent.vue
                app.js
        AppServiceProvide.php
        package.json
        webpack.mix.js

mix
  .options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  })
  .setPublicPath("public")
  .js("resources/js/app.js", "public")
  .version()
  .webpackConfig({
    resolve: {
      symlinks: false,
      alias: {
        "@": path.resolve(__dirname, "resources/js/")
      }
    },
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  });

<script src="{{asset(mix('app.js', 'vendor/packagename'))}}"></script>

3-在包中运行“npm run dev”，在包中的公用文件夹中编译app.js

4-在包的appserviceprovider.php中发布public\app.js文件：

$this->publishes([
                __DIR__.'/../resources/views' => resource_path('views/vendor/xoadmin'),
            ], 'views');

5-现在，您可以在资源视图文件中添加app.js文件，如下所示：

vendor
    packagename
        resources
            js
                components
                    examplecomponent.vue
                app.js
        AppServiceProvide.php
        package.json
        webpack.mix.js

mix
  .options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  })
  .setPublicPath("public")
  .js("resources/js/app.js", "public")
  .version()
  .webpackConfig({
    resolve: {
      symlinks: false,
      alias: {
        "@": path.resolve(__dirname, "resources/js/")
      }
    },
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  });

<script src="{{asset(mix('app.js', 'vendor/packagename'))}}"></script>



6-发出命令，将app.js文件从程序包公用文件夹发布到laravel的public\vendor\package文件夹

<?php

namespace Vendor\PackageName\Console;

use Illuminate\Console\Command;

class AssetsCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'packagename:assets';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Re-publish the packagename assets';

    /**
     * Execute the console command.
     *
     * @return void
     */
    public function handle()
    {
        $this->call('vendor:publish', [
            '--tag' => 'packagename-assets',
            '--force' => true,
        ]);

        $this->call('vendor:publish', [
            '--tag' => 'views',
            '--force' => true,
        ]);
    }
}

谢谢你的回答，你能解释一下Laravel\Horizon是怎么做的吗？关于你的答案，我认为你的代码应该在laravel的主app.js文件中，“而不是packages app.js文件”。这不是一个好的做法，因为如果安装了我的软件包，如何更改某人的app.js文件？我确实把代码放在了我的主laravel和packages app.js文件中，它对我不起作用。我认为最好的方法是laravel\horizon的方法，但我不明白他们是如何注册组件的。再次感谢。@Adam我添加了我的答案请检查。开发包时，我将执行
npm run watch
编译资产，是否需要不断执行publish命令以查看我的更改，或者你建议某人在开发过程中做些什么？@pickmanmurimi每次更改资产后，你都必须重新发布资源。