在WordPress插件的/wp-admin中设置Vue.js（vue-cli）热重载

Question

我对Vue.js还比较陌生，但我熟悉Javascript/jQuery，并且已经在WordPress方面深入研究了约8年。我花费了太多时间来配置一个使用vue-cli构建的WordPress插件，以便在/wp-admin部分热重载组件。有人成功设置代理表或使用其他中间件解决方案吗？是否有我不知道的开发工作流程的解决方法？

我很想在我的插件中使用Vue.js，但是缺乏Vue devtools和JS注入/热重载支持，使得开发非常麻烦。

谢谢！

- slowFooMovement

Answer 1

请查看我的GitHub存储库：

https://github.com/Tech-Nomad/wordpress-php-vue-webpack-hot-module-replacement-hmr-starter-setup

您将在那里找到一个完全可用的webpack起始设置，适用于WordPress主题。只需更改路径“wp-content/themes/your-fancy-theme/app”为“wp-content/plugins/your-fancy-plugin/app”，您就可以开始使用了。

我花了几个月的时间才完成它。我尝试了很多东西，但都没有成功，比如vue-cli（web套接字代理错误）。我认为这是Apache的问题，所以我试图使用Apache代理。我甚至学习了Nginx和Docker，以尝试所有我在Github和Stackoverflow上找到的可能建议。我几乎放弃了，但出于某种原因，我只是尝试了纯Webpack设置，没有vue-cli，然后HMR web套接字错误消失了。

- FullStack Alex

---

我认为你至少应该展示如何设置它。仅链接回答可能会被删除，而你所做的只是描述你的库。 - Machavity

我很高兴你能解决你的问题，但我的问题是如何通过插件在/wp-admin部分完成此操作，而不是主题开发。无论如何，我开始远离WordPress了，所以不确定我是否还关心它。哈哈 - slowFooMovement

嘿，对于Webpack来说，无论您是想在管理后台还是前端包含捆绑文件都没有关系。这只是在正确的挂钩上排队捆绑包的问题：[admin_enqueue_scripts]（https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/）此外，我的Webpack设置可以帮助您快速启动任何其他PHP项目的Vue.js开发。 - FullStack Alex