Nuxt - 如何在 PHP 页面画布中补充 app.js？

Posted 2023-02-22

【中文标题】Nuxt - 如何在 PHP 页面画布中补充 app.js？

【英文标题】：Nuxt - How to hydrate app.js in PHP page canvas?

【发布时间】：2021-12-21 11:02:28

【问题描述】：

我需要在 php 中处理网页画布的一部分，在 Nuxt 中处理另一部分。所以在我的php页面中我设置了这个结构。

<!-- Some php code -->
<div id="app">
  <!--I have to Inject Nuxt -->
</div>
<!-- Some php code -->

我可以用 Vue 做到这一点。在我的 PHP 文件的标题中，我加载了脚本 http://localhost:8080/js/app.js 并且应用程序 Div 已水合。

我如何在 Nuxt 中做到这一点？

您知道 nuxt 文件在哪里生成（使用热模块替换或构建）吗？

谢谢，

【问题讨论】：

您需要一个 nodejs 服务器来运行您的 nuxtjs 应用程序。还没有像 react s-s-r 这样的库可用，因此您必须在某处手动启动 nodejs 服务器（在同一 php 服务器或不同机器上）并从那里为您的站点提供服务器或使用 php 调用它。 vue 文档中有一个用于 PHP 的 guid，但它与 nuxtjs 无关。 s-s-r.vuejs.org/guide/non-node.html

为什么需要将 PHP 与 Nuxt 混合使用？

感谢代码精神。我会努力的。 @kissu 我需要将 PHP 与 nuxt 混合使用，因为我正在从传统的 wordpress 网站迁移到无病的 wordpress 网站。我的界面太多了，无法一次更改所有内容，因此我必须逐步进行。

什么是页面“画布”？

我的html页面的结构。这是设计中使用的术语。

【参考方案1】：

您将无法像 Vue 一样使用简单的 querySelector 插入 Nuxt，因为 Nuxt 需要大量的构建步骤。它不像 Vue 那样灵活，因为它本身就是对整个项目进行 s-s-r 的一种解决方案。

最好的办法是在迁移过程中继续使用 Vue，当一切都完成后：将 Vue 升级到 Nuxt（如果你的代码已经遵循了一些约定，那就没那么难了，其他的只是看看它在 Nuxt 中是如何组织的）。

在您的 PHP 网站旁边创建一个独立的 Nuxt 应用程序，然后开始对您的无头 CMS 进行 HTTP 调用，而不会破坏任何内容。

不要浪费时间尝试设置它们同时运行的一些奇怪行为，你会浪费更多时间 IMO。