使用 Idea intellij 实时编辑 PHP 刀片模板？ 下一步前进额外资源

如何解决使用 Idea intellij 实时编辑 PHP 刀片模板？ 下一步前进额外资源

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

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

我正在使用idea IntelliJ PHP内置Web服务器

解决方法

如果您想要此功能，则需要运行一些服务，例如 browserSync。我认为您需要使用比构建更真实的网络服务器，但我不确定。

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

,

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

这假设您使用的是 XAMPP

1. 安装 XAMPP。

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

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

3. 为您的项目设置虚拟主机。即：

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

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

     <VirtualHost *:80>
         ServerAdmin [e-mail]
         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。

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

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

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

   127.0.0.1 local.your-project

5. 确保启用/安装必要的 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

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

7. 设置 Laravel 混合 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/",}

});

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

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

9. 编译您的资产。

npm run dev

10. 开始观察项目文件的变化。

npm run watch

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

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

12. 从现在开始，每当您更改项目文件时，browserSync 都会自动刷新页面。

下一步（前进）

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

额外资源

Laravel | Compiling Assets (Mix)

Laravel | Laravel Mix