Question

我需要使用webpack和vueJS创建prestashop模块，但我找不到如何将它们组合在一起的方法。 prestashop中的起始文件是modulename.php，webpack中的start文件是index.html。而且我不知道如何连接它。即使我尝试将index.html包含到我的主模块文件中，那么我也没有虚拟标签，也没有通过vueJS创建任何内容（我构建生产）。

有某种方法可以做到吗？

Answer 1

我正在研究这个问题，想出了一些我并不满意的事情，但也许它会有所帮助。

在模块文件夹中，我在子文件夹'A'中创建了一个vue-cli + webpack-manifest-plugin的vue项目。

我在我的模块的特定页面中使用此vue项目，该页面由此控制器提供：

<?php
class mymodulepageModuleFrontController extends ModuleFrontController
{
    public function initContent()
    {
        parent::initContent();

        $manifest = file_get_contents(__DIR__.'/../../js/A/dist/manifest.json');
        $json = json_decode($manifest, true);

        foreach ($json as $original => $compiled) {
            if (substr($original, -3) === '.js') {
                $uri = '/modules/mymodule/js/A/dist'.$compiled;
                $this->registerJavascript(sha1($uri), $uri, ['position' => 'bottom', 'priority' => 80]);
            } elseif (substr($original, -4) === '.css') {
                $uri = '/modules/mymodule/js/A/dist'.$compiled;
                $this->registerStylesheet(sha1($uri), $uri, ['media' => 'all', 'priority' => 80]);
            }
        }

        $this->setTemplate('module:mymodule/views/templates/front/page.tpl');
    }
}

在mymodule/views/templates/front/page.tpl中，您现在可以使用vuejs组件。

{extends file='page.tpl'}

{block name='content'}
  <div id="app"></div>
{/block}

我看到的缺点是：

我使用已编译的资产：为每个变更构建很快就会很痛苦。并且你通过vue工具栏失去了调试的可能性。
解析每个请求上的manifest.json文件是不理想的。
如果prestashop也在同一页面上加载vuej，它将如何表现。我在这里害怕潜在的冲突。

prestashop和webpack模块

1 个答案: