如何正确运行/开发 laravel + vue.js (laravue) 应用程序

Posted 2023-02-22

【中文标题】如何正确运行/开发 laravel + vue.js (laravue) 应用程序

【英文标题】：How to run/develop laravel + vue.js (laravue) app properly

【发布时间】：2020-07-31 03:54:33

【问题描述】：

在我开始之前，我需要说我知道这个问题是初学者的问题。

我找到了我想要使用的 Laravel 和 Vue.js 的仪表板组合，然后开始开发一个真正的 Web 应用程序。 laravue

只有一个问题让我感到困惑：在 xampp 上使用“npm run watch”和“php artisan serve”命令对其进行测试时，我发现自己每次更改文件时都必须 npm 运行项目。

那么检查我所做的所有更改的正确方法是什么？只需刷新浏览器窗口即可。

【问题讨论】：

我使用 Laravue，非常有用且结构良好（Vue 文件结构可能会变得混乱..）'npm run watch' 将在您保存任何内容时自动构建.. 保持运行

我让它运行，但我得到的只是一条关于“编译成功”的消息，然后我在本地主机的任何地方都找不到我的应用程序。

你需要运行 php artisan serve

【参考方案1】：

npm run watch 自动构建您的资产，然后查看相关文件的任何保存。每当发生保存时，npm run watch 会重建所有内容，但您不会在 Web 浏览器上察觉到，除非通过刷新。

P.S: 有时候npm run watch 效果不好，那就改用npm run watch-poll

https://laravel.com/docs/7.x/mix#running-mix

【讨论】：

所以我运行了 watch-poll 并得到了“构建成功”的消息。然后我记得打开第二个 cmd 窗口并运行“php artisan serve”，它运行良好！我只是不认为这是正确的方法，或者是吗？

【参考方案2】：

感谢大家的回复。

我通过在两个单独的命令行窗口上运行“npm run watch”和“php artisan serve”解决了这个问题。

完全没有意识到这一点，这是学习曲线的一部分。 谢谢，这个问题已经解决了。

【参考方案3】：

npm run watch 或 npm run watch-poll 将自动重建您的资源，但不会在没有手动刷新的情况下应用于浏览器。这意味着您必须在编译完成后重新加载浏览器。

热模块更换（HMR - 或热重新加载）与npm run watch 的工作方式相同，并自动将更改应用到浏览器，因此您无需重新加载浏览器即可查看更改。

按照这个document，作为我的测试，HRM 与全新安装（master 上的最新代码）配合得很好。

npm run hot 结果：

➜  npm run hot
> laravue@0.11.0 hot [src]
> cross-env NODE_ENV=development BABEL_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from http://localhost:8080/
ℹ ｢wds｣: Content not from webpack is served from [src]/public
ℹ ｢wds｣: 404s will fallback to /index.html

php artisan serve 结果：

➜  php artisan serve
Laravel development server started: http://127.0.0.1:8000

和浏览器：