比方说，我想用自定义的替换 nova/resources/js/components/Form/FieldWrapper.vue（添加一些 CSS 类或添加额外的 HTML），如何做到这一点，而无需更改 / nova 目录（能够更新 nova）？
改变编辑视图的用例例如：
【问题讨论】：
标签： laravel-nova
在 nova 文件夹内更改文件：
webpack.mix.js.dist 到 webpack.mix.js
进入 nova 文件夹并执行：
npm install
npm run watch
然后转到文件夹 nova\resources\js
去改变你需要的vue组件
然后运行（在您的根项目上）：
php artisan nova:publish
【讨论】：
覆盖 laravel nova vue 文件最简单的方法是创建一个工具，并加载一个与要覆盖的组件同名的组件。
在我的例子中，我正在创建一个自定义的 Nova 动作，laravel Nova 不支持自定义动作，但无论如何你都可以做到。为了使自定义动作起作用，我需要覆盖 2 个 laravel nova vue 文件。让我告诉你我是怎么做到的。
我首先使用命令php artisan nova:resource-tool vendor/package-name 创建了一个自定义工具。将供应商和包名称更改为您的偏好。上面的命令将在你的 Laravel 项目的根目录中创建你的工具文件夹和 nova-components 文件夹。
在你工具的src文件夹下，有服务提供者类和主工具类，我的工具服务提供者是这样的
<?php
namespace TestTool\DataExportAction;
use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;
use Illuminate\Support\ServiceProvider;
class ActionServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Nova::serving(function (ServingNova $event) {
Nova::script('data-export-action', __DIR__.'/../dist/js/action.js');
});
}
}
如您所见，我只提供一个 js 文件。
我的名为DataExportAction.php 的主要工具类看起来像这样
<?php
namespace TestTool\DataExportAction;
use Laravel\Nova\Actions\Action;
abstract class DataExportAction extends Action
{
/**
* The filter's component.
*
* @var string
*/
public $component = 'data-export-action';
}
如您所见，扩展位于 nova/src/Actions/Action.php 的 laravel Nova 动作基类，并在此处覆盖 vue 组件名称 public $component = 'data-export-action';
在工具resources/js 文件夹中，我有我重命名为action.js 的主要tool.js 文件和一个组件文件夹，我们将在其中放置将覆盖主要Nova vue 文件的vue 组件。
在action.js 文件中我有这个
Nova.booting(Vue => {
Vue.component('data-export-action', require('./components/ConfirmActionModal'));
})
注意组件名称与DataExportAction类中定义的相同
现在为了使用自定义类，我创建了默认的 nova 动作类，而不是扩展 nova/src/Actions/Action.php 类，我扩展了 DataExportAction 类，它会在加载动作时自动使用我的自定义组件。
现在，为了更好地控制操作，我还需要覆盖位于 nova/resources/js/components/ActionSelector.vue 的 Vue 组件。如果你检查位于nova/resources/js/components.js 的主 nova 组件文件，组件是这样加载的
...
import ActionSelector from '@/components/ActionSelector'
Vue.component('action-selector', ActionSelector)
...
在工具组件文件夹中创建一个ActionSelector.vue 文件，其内容为nova/resources/js/components/ActionSelector.vue。
然后在action.js 文件中，添加该行
Vue.component('action-selector', require('./components/ActionSelector'));
现在action.js 文件看起来像
Nova.booting(Vue => {
Vue.component('data-export-action', require('./components/ConfirmActionModal'));
Vue.component('action-selector', require('./components/ActionSelector'));
})
注意我们不会更改组件名称，现在 Nova 加载 action-selector 组件时，它将加载我们的自定义组件而不是默认组件
如果你尝试运行 npm 来编译我们刚刚创建的工具的 js，你会得到一个错误，因为我们覆盖的组件需要仅在 Nova node_modules 文件夹中的文件，为了解决这个问题，我们编辑我们的 @987654347 @ 看起来像这样
let mix = require('laravel-mix')
mix.setPublicPath('dist')
.js('resources/js/action.js', 'js');
到这里
let mix = require('laravel-mix')
mix.setPublicPath('dist')
.js('resources/js/action.js', 'js')
.webpackConfig({
resolve: {
alias: {
'@/storage': path.resolve(__dirname, '../../nova/resources/js/storage'),
'@': path.resolve(__dirname, '../../nova/resources/js/'),
},
modules: [
path.resolve(__dirname, '../../nova/node_modules/'),
],
symlinks: false
},
});
所以我们不使用我们的工具node_modules 文件夹，而是使用nova/ 中的那个
webpack 现在应该可以成功编译了。
我们已经成功覆盖了一个 Laravel Nova vue 文件
如果您有任何问题，请在下方评论，干杯！！
【讨论】：