使用Idea intellij进行PHP刀片模板实时编辑？答案

【问题标题】：PHP blade template live edit with Idea intellij?使用Idea intellij进行PHP刀片模板实时编辑？
【发布时间】：2021-08-25 22:30:47
【问题描述】：

在 Laravel 项目中使用 Idea IntelliJ 时，是否有任何插件、chrome 扩展可用于实时编辑（不断刷新浏览器）？

我需要的是当我编辑 Blade 模板时，我希望浏览器自动刷新而不需要手动按 (commad+R) 或 (control + F5)

我正在使用idea IntelliJ PHP Built-in Web Server

【问题讨论】：

标签： php laravel intellij-idea laravel-blade

【解决方案1】：

注意：这些说明不依赖于 XAMPP。您可以使用任何 apache/nginx 服务器设置堆栈。即 LAMP 跟随。

假设您使用的是XAMPP

安装 XAMPP。
将您的项目移动/设置到 XAMPP 的 htdocs 文件夹。 (C:\xampp\htdocs)

注意：接下来，我将使用your-project 表示您的实际项目名称。

为您的项目设置一个虚拟主机。即：

打开文件：C:\xampp\apache\conf\extra\httpd-vhosts.conf

然后在此文件末尾添加以下标签：

  <VirtualHost *:80>
      ServerAdmin steve@steve.com
      DocumentRoot "C:\xampp\htdocs\your-project\public"
      ServerName local.your-project

      <Directory "C:/xampp/htdocs">
           Options Indexes FollowSymLinks
           AllowOverride All
           Order allow,deny
           Allow from all
           Require all granted
      </Directory>
  </VirtualHost>

您可以随意更改ServeAdmin 和DocumentRoot。

调整您的 hosts 文件以在您从浏览器访问项目时始终路由到 127.0.0.1。

对于“Windows 操作系统” 用户，您可以在以下位置找到该文件：C:\Windows\System32\drivers\etc\hosts

打开hosts文件并在末尾添加以下行：

127.0.0.1 local.your-project

确保启用/安装必要的 PHP 扩展以顺利运行您的项目。

您可能需要删除相应行中前面的 ; 字符才能启用这些扩展。

对于“Windows 操作系统” 用户，您可以在以下位置找到配置文件：C:\xampp\php\php.ini

打开您的php.ini 配置文件并确认以下扩展已启用。

    ; Directory in which the loadable extensions (modules) reside.
    ; http://php.net/extension-dir
    ;extension_dir = "./"
    ; On windows:
    extension_dir="C:\xampp\php\ext"

    extension=bz2
    extension=curl
    extension=fileinfo
    extension=gd
    extension=gettext
    extension=intl
    extension=mbstring
    extension=exif
    extension=openssl
    extension=pdo_mysql
    extension=mysqli
    extension=php_openssl.dll
    extension=php_ftp.dll

注意： 以下所有命令都假定您的终端/命令提示符指向您的项目根目录。即：cd C:\xampp\htdocs\your-project

确保 MySQL 和 Apache 服务都在运行。

设置 Laravel mix with browserSync。

注意： 以下命令假定您的计算机上已经安装了Node.js and NPM。

安装browser-sync

npm i browser-sync --save-dev

安装browser-sync-webpack-plugin

npm install browser-sync-webpack-plugin --save-dev

安装任何挂起的未运行依赖项。

npm install

在your-project-root-directory\webpack.mix.js打开文件

在该文件末尾添加以下配置。

// ...

mix.browserSync({
    port: 8089,
    proxy: {
        target: "http://local.your-project/",
    }

});

[可选]。如果您在应用程序中使用sass，您可能希望包含以下依赖项。

npm install sass-loader sass resolve-url-loader --save-dev

编译您的资产。

npm run dev

开始观察项目文件更改。

npm run watch

此时，如果您的浏览器已经打开，您的项目可能已经自动加载。如果不是这种情况，请打开浏览器并搜索此 URL。 http://localhost:8089/

这表示您在配置browserSync 时设置的port。

从此时起，browserSync 将在您更改项目文件时自动刷新页面。

接下来的步骤（前进）

每当您开始处理您的项目时，只需确保 MySQL 和 Apache 服务都在运行。然后在您的终端中运行npm run watch 以获取browserSync 以开始监听文件更改。

额外资源

Laravel | Compiling Assets (Mix)

Laravel | Laravel Mix

【讨论】：

不，我没有使用 XAMMP。
@Adelin，这些指令不依赖于 XAMPP。您可以使用任何 apache 设置。即 LAMP 跟随。

【解决方案2】：

如果你想要这个功能，你需要运行一些服务，比如 browserSync。我认为您需要使用比内置网络服务器更真实的网络服务器，但我不确定。

我已经通过在本地使用 Laradock 运行了这个，一旦设置了 Laradock，就可以很容易地运行 browswersync 并获得实时刷新。

【讨论】：