Vue集成Grapesjs时无法添加grapesjs-preset-webpage更多区块

我在Vue中集成GrapesJS，基础功能正常，但使用grapesjs-preset-webpage库时，无法添加列、视频等更多HTML选项（CDN方式下这些选项能正常显示），目前只有默认的link-block、quote、text-basic三个区块可用。我添加了相关配置但新区块仍不显示，请问配置是否有误？

我的配置代码：

<script>
  import grapesjs from 'grapesjs'
  import 'grapesjs/dist/css/grapes.min.css'
  import 'grapesjs/dist/grapes.min.js'
  import plugin from 'grapesjs-preset-webpage';

  export default {
    name: 'BuilderHtml',
    mounted(){
      grapesjs.init({
        container: '#gjs',
        height: '900px',
        width: '100%',
        plugins: [plugin],
        storageManager: {
          id: 'gjs-',
          type: 'local',
          autosave: true,
          storeComponents: true,
          storeStyles: true,
          storeHtml: true,
          storeCss: true,
        },
        deviceManager: {
          devices: [
            {
              id: 'desktop',
              name: 'Desktop',
              width: '',
            },
            {
              id: 'tablet',
              name: 'Tablet',
              width: '768px',
              widthMedia: '992px',
            },
            {
              id: 'mobilePortrait',
              name: 'Mobile portrait',
              width: '320px',
              widthMedia: '575px',
            },
          ]
        },
        pluginsOpts: {
          [plugin]: {
            blocksBasicOpts: {
                blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video'],
                flexGrid: 1,
            },
            blocks: ['link-block', 'quote', 'text-basic', 'column3'],
          },
        }
      })
    }
  }
</script>

• 配置冲突是核心问题：你在pluginsOpts里同时写了blocksBasicOpts和blocks，这两个配置会互相覆盖。grapesjs-preset-webpage中，blocks配置会直接替换预设的所有区块列表，你这里只指定了4个区块，所以其他列、视频等自然不会显示。
• 删除冗余导入：已经通过import grapesjs from 'grapesjs'导入了核心库，再导入grapesjs/dist/grapes.min.js属于重复加载，会增加冗余甚至引发冲突，直接删掉这行。
• 调整配置逻辑：如果要使用预设的基础区块并自定义列表，只保留blocksBasicOpts即可；如果需要完全自定义区块列表，就单独用blocks配置，但要把所有需要的区块都列进去。

修改后的配置代码示例：

<script>
  import grapesjs from 'grapesjs'
  import 'grapesjs/dist/css/grapes.min.css'
  import plugin from 'grapesjs-preset-webpage';

  export default {
    name: 'BuilderHtml',
    mounted(){
      grapesjs.init({
        container: '#gjs',
        height: '900px',
        width: '100%',
        plugins: [plugin],
        storageManager: {
          id: 'gjs-',
          type: 'local',
          autosave: true,
          storeComponents: true,
          storeStyles: true,
          storeHtml: true,
          storeCss: true,
        },
        deviceManager: {
          devices: [
            {
              id: 'desktop',
              name: 'Desktop',
              width: '',
            },
            {
              id: 'tablet',
              name: 'Tablet',
              width: '768px',
              widthMedia: '992px',
            },
            {
              id: 'mobilePortrait',
              name: 'Mobile portrait',
              width: '320px',
              widthMedia: '575px',
            },
          ]
        },
        pluginsOpts: {
          [plugin]: {
            blocksBasicOpts: {
                // 这里列出所有你需要的区块
                blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'link-block', 'quote', 'text-basic'],
                flexGrid: 1,
            },
            // 删除单独的blocks配置，避免覆盖
          },
        }
      })
    }
  }
</script>

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