在Shopware模块中导入Vue Grid Layout遇解析错误求解决

• 已按Shopware官方指南在管理端完成vue-grid-layout的NPM包安装
• 使用import VueGridLayout from '@vue-grid-layout';导入时出现解析错误，错误日志片段：

resolve '@vue-grid-layout' in '/var/www/html/custom/plugins/ShopwareWidgets/src/Resources/app/administration/src/module/m28-widgetFactory/page/m28-widgetFactory-Dashboard'
Parsed request is a module
Using description file: /var/www/html/package.json (relative path: ./custom/plugins/ShopwareWidgets/src/Resources/app/administration/src/module/m28-widgetFactory/page/m28-widgetFactory-Dashboard)
Aliased with mapping '@vue-grid-layout': '/var/www/html/custom/plugins/ShopwareWidgets/src/Resources/app/administration/node_modules/vue-grid-layout' to '/var/www/html/custom/plugins/ShopwareWidgets/src/Resources/app/administration/node_modules/vue-grid-layout'

• 尝试使用浏览器就绪包时，模块完全无法编译且无调试日志

1. 确认包安装路径 #

确保vue-grid-layout安装在插件的administration子目录下，而非Shopware根目录：

cd /var/www/html/custom/plugins/ShopwareWidgets/src/Resources/app/administration
npm list vue-grid-layout

如果未找到包，重新执行安装：

npm install vue-grid-layout --save

2. 修正导入语法 #

vue-grid-layout的正确导入方式并非@vue-grid-layout，需直接导入包内组件并引入样式：

import { GridLayout, GridItem } from 'vue-grid-layout';
import 'vue-grid-layout/dist/style.css';

在Vue组件中注册并使用：

<template>
  <grid-layout
    :layout="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :margin="[10, 10]"
  >
    <grid-item
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
    >
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';
import 'vue-grid-layout/dist/style.css';

export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '0' },
        { x: 2, y: 0, w: 2, h: 4, i: '1' }
      ]
    };
  }
};
</script>

3. 配置Webpack别名（可选） #

若仍存在解析问题，在插件的webpack.config.js中添加别名配置（无则新建该文件）：

const path = require('path');

module.exports = () => {
    return {
        resolve: {
            alias: {
                'vue-grid-layout': path.resolve(__dirname, 'node_modules/vue-grid-layout')
            }
        }
    };
};

配置完成后重新编译管理端：

./bin/build-administration.sh

4. 放弃浏览器就绪包 #

浏览器就绪包与Shopware的模块化构建体系冲突，会导致无日志的编译失败，建议始终使用NPM包配合上述导入方式。

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