Yii2项目集成GridStackJS遇资源找不到/发布失败问题求助

在PHP Yii2项目中配置GridStackJS时遇到困难，已尝试以下几种配置方式：

• CDN手动配置：存在库管理相关的潜在冲突
• 利用Yii2的AssetBundle特性配置资源包
• Composer安装：Yii2无法找到或发布GridStackJS资源
• Yii资源命令
• GridStackAsset配置：调整GridStackAsset类的$sourcePath属性

尽管尝试了上述方法，核心问题仍未解决：Yii2无法找到或发布GridStackJS资源，提示要发布的文件或目录不存在。已在网上搜索但未找到具体可行的配置方案。

当前配置代码 #

frontend/views/site/about.php #

<?php

/** @var yii\web\View $this */

use yii\helpers\Html;
use frontend\assets\GridStackAsset;

// Register the GridStackAsset for this specific view
GridStackAsset::register($this);
$this->registerJsFile('@web/js/gridstack-init.js', ['depends' => [GridStackAsset::class]]);

$this->title = 'About';
$this->params['breadcrumbs'][] = $this->title;
?>
<!DOCTYPE html>
<html>

<head>
    <script src="node_modules/gridstack/dist/gridstack-all.js"></script>
    <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet" />
    <style type="text/css">
        .grid-stack {
            background: #FAFAD2;
        }

        .grid-stack-item-content {
            background-color: #18BC9C;
        }
    </style>
    <script type="text/javascript">
        // var items = [
        //     { content: 'my first widget' }, // will default to location (0,0) and 1x1
        //     { w: 2, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
        // ];
        var grid = GridStack.init();
        // grid.load(items);
    </script>



</head>

<body>
<div class="grid-stack">
            <div class="grid-stack-item">
                <div class="grid-stack-item-content">Item 1</div>
            </div>
            <div class="grid-stack-item" gs-w="2">
                <div class="grid-stack-item-content">Item 2 wider</div>
            </div>
        </div>
</body>

</html>

frontend/web/js/gridstack-init.js #

const options = {
  cellHeight: "11rem",
  maxRow: 3,
};

const grid = GridStack.init(options);

// Add code to dynamically add widgets to the grid
// Example:
const widget1 = grid.addWidget({ w: 4, h: 2, content: '<div class="grid-stack-item-content">Widget 1</div>' });
const widget2 = grid.addWidget({ w: 4, h: 2, content: '<div class="grid-stack-item-content">Widget 2</div>' });

frontend/assets/GridStackAsset.php #

<?php

namespace frontend\assets;

use yii\web\AssetBundle;

class GridStackAsset extends AssetBundle
{
    public $sourcePath = '@npm/gridstack';

    public $css = [
        'gridstack/dist/gridstack.min.css',
    ];

    public $js = [
        'gridstack/dist/gridstack-all.js',
    ];

    public $depends = [
        'yii\web\YiiAsset', // Yii2 core assets
    ];
}

frontend/config/main.php #

<?php
$params = array_merge(
    require __DIR__ . '/../../common/config/params.php',
    require __DIR__ . '/../../common/config/params-local.php',
    require __DIR__ . '/params.php',
    require __DIR__ . '/params-local.php'
);

return [
    'id' => 'app-frontend',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
    'controllerNamespace' => 'frontend\controllers',
    'components' => [
        'request' => [
            'csrfParam' => '_csrf-frontend',
        ],
        'user' => [
            'identityClass' => 'common\models\User',
            'enableAutoLogin' => true,
            'identityCookie' => ['name' => '_identity-frontend', 'httpOnly' => true],
        ],
        'session' => [
            // this is the name of the session cookie used for login on the frontend
            'name' => 'advanced-frontend',
        ],
        'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
                [
                    'class' => \yii\log\FileTarget::class,
                    'levels' => ['error', 'warning'],
                ],
            ],
        ],
        'errorHandler' => [
            'errorAction' => 'site/error',
        ],
        
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
                'invoice/generate-invoice' => 'invoice/generate-invoice',
            ],
        ],

        'assetManager' => [
            'bundles' => [
                'frontend\assets\GridStackAsset',
            ],
        ],
        
       
    ],
    'params' => $params,
];

frontend/config/asset.php #

<?php
return [
    'basePath' => '@webroot', // Specify the root directory containing asset files (in this case, the web directory)
    'baseUrl' => '@web',
    'bundles' => [
        'frontend\assets\GridStackAsset',
        // Add other asset bundles if needed
    ],
];

composer.json #

{
  "name": "yiisoft/yii2-app-advanced",
  "description": "Yii 2 Advanced Project Template",
  "keywords": [
    "yii2",
    "framework",
    "advanced",
    "project template"
  ],
  "homepage": "https://www.yiiframework.com/",
  "type": "project",
  "license": "BSD-3-Clause",
  "support": {
    "issues": "https://github.com/yiisoft/yii2/issues?state=open",
    "forum": "https://www.yiiframework.com/forum/",
    "wiki": "https://www.yiiframework.com/wiki/",
    "irc": "ircs://irc.libera.chat:6697/yii",
    "source": "https://github.com/yiisoft/yii2"
  },
  "minimum-stability": "stable",
  "require": {
    "php": ">=7.4.0",
    "yiisoft/yii2": "^2.0.34",
    "yiisoft/yii2-bootstrap5": "^2.0",
    "yiisoft/yii2-symfonymailer": "~2.0.3",
    "tecnickcom/tcpdf": "^6.6",
    "npm-asset/gridstack": "^9.5"
  },
  "require-dev": {
    "yiisoft/yii2-debug": "~2.1.0",
    "yiisoft/yii2-gii": "~2.2.0",
    "yiisoft/yii2-faker": "~2.0.0",
    "phpunit/phpunit": "~9.5.0",
    "codeception/codeception": "^5.0.0 || ^4.0",
    "codeception/lib-innerbrowser": "^4.0 || ^3.0 || ^1.1",
    "codeception/module-asserts": "^3.0 || ^1.1",
    "codeception/module-yii2": "^1.1",
    "codeception/module-filesystem": "^3.0 || ^2.0 || ^1.1",
    "codeception/verify": "^3.0 || ^2.2",
    "symfony/browser-kit": "^6.0 || >=2.7 <=4.2.4"
  },
  "autoload-dev": {
    "psr-4": {
      "app": "app/",
      "common\\tests\\": [
        "common/tests/",
        "common/tests/_support"
      ],
      "backend\\tests\\": [
        "backend/tests/",
        "backend/tests/_support"
      ],
      "frontend\\tests\\": [
        "frontend/tests/",
        "frontend/tests/_support"
      ]
    }
  },
  "config": {
    "allow-plugins": {
      "yiisoft/yii2-composer": true
    },
    "process-timeout": 1800,
    "fxp-asset": {
      "enabled": false
    }
  },
  "repositories": [
    {
      "type": "composer",
      "url": "https://asset-packagist.org"
    }
  ]
}

错误提示 #

内容的提问来源于stack exchange，提问作者MT-Dev