英文:
Implementing Live Reloading for WordPress and Vue Development on Localhost
问题
I am currently developing a Vue application as a WordPress theme and need to establish communication between WordPress and Vue using PHP.
为了实现这一目标，我需要在本地同时运行WordPress服务器和Vue应用。然而，我遇到了一个问题，即当修改Vue文件时，WordPress服务器没有实时重新加载功能。为了解决这个问题，我已经探索了潜在的解决方案，并希望确认我的方法是否正确。
为了解决在修改Vue文件时WordPress服务器没有实时重新加载的问题，我采取了以下方法。首先，我分别运行WordPress和Vue的本地服务器。此外，我还使用Browsersync设置了另一个本地服务器，它充当WordPress服务器的代理。这个Browsersync服务器会监视Vue文件的任何修改，并在检测到更改时触发重新加载。
虽然这个解决方案在为Vue应用提供实时重新加载功能方面证明是有效的，但我希望能听到您的专业意见，看看这种方法是否符合最佳实践，或者是否有更合适的替代方法。
英文:
I am currently developing a Vue application as a WordPress theme and need to establish communication between WordPress and Vue using PHP. To achieve this, I need to run both the WordPress server and Vue app simultaneously on my localhost. However, I have encountered an issue where the WordPress server does not have live reloading functionality when modifying Vue files. In order to address this problem, I have explored potential solutions and would like to confirm if my approach is correct.
To address the issue of live reloading on the WordPress server while making changes to Vue files, I have implemented the following approach. Firstly, I run separate local servers for both WordPress and Vue. Additionally, I set up another local server using Browsersync, which acts as a proxy for the WordPress server. This Browsersync server monitors the Vue files for any modifications and triggers a reload whenever changes are detected.
While this solution has proven effective in providing live reloading functionality for the Vue app, I would appreciate your professional opinion on whether this approach aligns with best practices or if there are alternative methods that may be more appropriate.
答案1
得分: 0
使用像这样的代理确实有效，但会导致所有内容都被代理，如果你只想要实时重新加载，这有点过于极端。
Browsersync 有 'snippet mode' + 'localOnly' 选项来解决这个问题。
例如，你可以运行
browser-sync start --files 'app/**/*.php' --localOnly
这将在你的终端输出以下内容
$ browser-sync start --files 'app/**/*.php' --localOnly
[Browsersync] 将以下片段复制到你的网站，在 </body> 标签之前
<script async id="__bs_script__" src="http://localhost:3000/browser-sync/browser-sync-client.js?v=2.29.2"></script>
所以，将 HTML 片段复制到任何 PHP 模板或 HTML 文件中，你将获得实时重新加载等功能。
英文:
Using a proxy like this does work - but it causes everything to be proxied which is a bit extreme if all you want is live-reloading.
Browsersync has 'snippet mode' + 'localOnly' for this.
For example, you can run
browser-sync start --files 'app/**/*.php' --localOnly
Which will output the following in your terminal
$ browser-sync start --files 'app/**/*.php' --localOnly
[Browsersync] Copy the following snippet into your website, just before the closing </body> tag
<script async id="__bs_script__" src="http://localhost:3000/browser-sync/browser-sync-client.js?v=2.29.2"></script>
So, copy the HTML snippet into any PHP template or HTML file and you'll get live-reloading etc
https://gist.github.com/shakyShane/d2d12070b1c9b6c56e7ef3403e872de7
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论