告别邮件布局噩梦：如何使用asahasrabuddhe/laravel-mjml轻松构建响应式邮件-composer-PHP中文网

告别邮件布局噩梦：如何使用asahasrabuddhe/laravel-mjml轻松构建响应式邮件

WBOY

发布： 2025-08-19 11:46:26

原创

723人浏览过

Composer在线学习地址：学习地址

邮件开发的痛点：一场与兼容性搏斗的持久战

我深有体会，每次接到需要发送营销邮件或通知邮件的需求时，心情总是复杂的。因为我知道，这不仅仅是写几行html那么简单。为了让邮件在outlook、gmail、apple mail等不同的邮件客户端上都能保持一致的显示效果，我们往往需要：

手动内联CSS： 许多邮件客户端会剥离
```
<style>
```
登录后复制
标签中的样式，迫使我们将所有CSS都写成内联样式，这让代码变得冗长且难以维护。
依赖表格布局： 为了实现复杂的布局，我们不得不回到上世纪的网页开发方式，大量使用
```
<table>
```
登录后复制
标签进行布局，这让HTML结构变得臃肿不堪。
响应式设计的挑战： 在手机和桌面端之间切换时，邮件布局经常会“崩坏”。为了实现响应式，我们需要编写大量的媒体查询，并进行反复测试和调整。
调试的煎熬： 邮件在不同客户端上的渲染差异，意味着我们需要在多个环境中进行测试，排查那些难以捉摸的兼容性问题，效率极其低下。

这些问题叠加在一起，让邮件开发成为一个效率低下、令人沮丧的过程。我一直在寻找一种更优雅、更高效的解决方案。

救星登场：Composer 与

asahasrabuddhe/laravel-mjml

登录后复制

正当我被这些邮件布局问题折磨得焦头烂额时，我偶然发现了 MJML。MJML (Mailjet Markup Language) 是一个开源的标记语言，它旨在简化响应式邮件的开发。你用一套简洁的MJML语法来描述邮件结构，然后MJML编译器会将其转换为兼容性极佳的响应式HTML代码。这简直是邮件开发者的福音！

然而，如何在我的Laravel项目中优雅地集成MJML呢？这时，Composer作为PHP的包管理器，再次展现了它的强大之处。通过

asahasrabuddhe/laravel-mjml

登录后复制

这个Composer包，MJML的能力被完美地引入到了Laravel的Mailable系统中。

这个包的作用就像一座桥梁，连接了Laravel的邮件发送机制和MJML的强大渲染能力。它允许你在Laravel的邮件视图中直接编写MJML代码，并在发送前自动将其编译为标准的HTML，从而省去了手动编译和复制粘贴的麻烦。

如何使用

asahasrabuddhe/laravel-mjml

登录后复制

解决问题

整个集成和使用过程非常顺畅，主要分为以下几个步骤：

1. 安装 Composer 包

首先，你需要通过Composer将

asahasrabuddhe/laravel-mjml

登录后复制

添加到你的项目中：

<pre class="brush:php;toolbar:false;">composer require asahasrabuddhe/laravel-mjml

登录后复制

2. 安装 MJML CLI

asahasrabuddhe/laravel-mjml

登录后复制

包本身是一个Laravel集成层，它依赖于底层的MJML编译器。因此，你还需要通过npm安装MJML的命令行工具：

<pre class="brush:php;toolbar:false;">npm install --save mjml

登录后复制

安装完成后，你可以选择发布包的配置文件，尽管通常情况下，它会自动检测MJML CLI的路径：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

<pre class="brush:php;toolbar:false;">php artisan vendor:publish

登录后复制

在列表中选择

laravel-mjml

登录后复制

。

3. 创建 MJML 邮件视图

现在，你可以在

resources/views

登录后复制

目录下创建一个新的邮件视图文件，并以

.mjml

登录后复制

扩展名保存（或者在配置中指定其他扩展名），在其中编写你的MJML代码。例如，

resources/views/emails/welcome.mjml

登录后复制

：

<pre class="brush:php;toolbar:false;"><mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">
          Hello, {{ $user->name }}!
        </mj-text>
        <mj-button href="https://your-app.com" background-color="#F45E43">
          Explore Our App
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

登录后复制

4. 创建 Laravel Mailable 类并集成

接下来，创建一个标准的Laravel Mailable 类：

<pre class="brush:php;toolbar:false;">php artisan make:mail WelcomeEmail

登录后复制

然后，关键的一步是修改

WelcomeEmail

登录后复制

类，使其继承

asahasrabuddhe\LaravelMJML\Mail\Mailable

登录后复制

而不是

Illuminate\Mail\Mailable

登录后复制

。这将赋予你的Mailable类编译MJML的能力。

<pre class="brush:php;toolbar:false;"><?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
// use Illuminate\Mail\Mailable; // 注释或删除这行
use Asahasrabuddhe\LaravelMJML\Mail\Mailable; // 使用这个新的 Mailable
use Illuminate\Mail\Mailables\Content; // Laravel 9+
use Illuminate\Mail\Mailables\Envelope; // Laravel 9+
use Illuminate\Queue\SerializesModels;

class WelcomeEmail extends Mailable
{
    use Queueable, SerializesModels;

    public $user;

    /**
     * Create a new message instance.
     */
    public function __construct($user)
    {
        $this->user = $user;
    }

    /**
     * Get the message envelope. (Laravel 9+)
     */
    public function envelope(): Envelope
    {
        return new Envelope(
            subject: 'Welcome to Our App!',
        );
    }

    /**
     * Get the message content definition. (Laravel 9+)
     */
    public function content(): Content
    {
        return new Content(
            view: $this->mjml('emails.welcome')->buildMjmlView()['html'], // 使用 mjml() 方法
        );
    }

    /**
     * Build the message. (Laravel 8 及以下)
     */
    public function build()
    {
        return $this->mjml('emails.welcome') // 使用 mjml() 方法
                    ->subject('Welcome to Our App!');
    }
}

登录后复制

注意：

对于 Laravel 8 及以下版本，在
```
build
```
登录后复制
方法中使用
```
$this->mjml('view.name')
```
登录后复制
。
对于 Laravel 9 及以上版本，在
```
content
```
登录后复制
方法中，你需要返回一个
```
content
```
登录后复制
实例，其中
```
view
```
登录后复制
属性的值是
```
$this->mjml('view.name')->buildMjmlView()['html']
```
登录后复制
。

优势与实际应用效果

使用

asahasrabuddhe/laravel-mjml

登录后复制

后，我的邮件开发体验得到了质的飞跃：

开发效率飙升： 我不再需要手动编写复杂的HTML表格和内联CSS。MJML的语义化标签让邮件结构清晰易懂，开发时间大大缩短。
天生响应式： MJML编译出的HTML本身就是高度响应式的，我几乎不需要为移动端适配做额外的调整，大大减少了调试工作量。
告别兼容性烦恼： MJML社区持续维护和优化，确保生成的HTML在主流邮件客户端上表现良好。我不再需要为Outlook的怪癖或Gmail的限制而头疼。
代码更整洁： MJML代码比原始HTML简洁得多，易于阅读和维护，团队协作也变得更加顺畅。
与Laravel生态无缝集成： 作为Laravel Mailable的一部分，它完美融入了Laravel的邮件发送流程，队列、附件等功能依然可以正常使用。

现在，每当有邮件发送需求时，我都能自信地使用MJML来构建，它不仅让我的工作变得更轻松，也让最终用户收到的邮件体验得到了显著提升。

总结

asahasrabuddhe/laravel-mjml

登录后复制

这个Composer包，结合MJML的强大能力，彻底解决了我在Laravel项目中构建响应式HTML邮件的痛点。它将复杂的邮件布局工作简化为优雅的MJML语法，并通过Composer的便利性，无缝集成到Laravel的开发流程中。如果你也曾被HTML邮件的兼容性问题所困扰，那么我强烈推荐你尝试一下这个解决方案，它会让你爱上邮件开发！

以上就是告别邮件布局噩梦：如何使用asahasrabuddhe/laravel-mjml轻松构建响应式邮件的详细内容，更多请关注php中文网其它相关文章！