如何在Laravel Blade中结合Maizzle实现多环境适配？

核心思路 #

通过Maizzle的环境专属配置变量，为本地开发和生产构建分别定义资源路径的生成逻辑，模板中统一调用这个逻辑实现自动切换。

步骤1：配置本地开发环境（config.js） #

编辑config.js，定义本地预览时的资源URL生成规则，读取Laravel的APP_URL环境变量：

// 先引入dotenv读取Laravel的.env文件（需先安装dotenv）
require('dotenv').config({ path: '../.env' }); // 路径根据你的项目结构调整，比如Laravel根目录在Maizzle上层就用../.env

module.exports = {
  env: {
    // 从Laravel的.env获取APP_URL，本地预览时用这个拼接图片路径
    appUrl: process.env.APP_URL || 'http://localhost:3000',
    // 本地环境的资源路径生成函数
    getAssetPath: function(path) {
      return `${this.appUrl}/${path}`;
    }
  },
  // 你的其他已有配置...
}

步骤2：配置生产构建环境（config.production.js） #

编辑config.production.js，重写资源路径生成逻辑，返回Laravel Blade的asset()指令：

module.exports = {
  env: {
    // 生产环境直接返回Blade指令
    getAssetPath: function(path) {
      return `{{ asset('${path}') }}`;
    }
  },
  // 你的其他已有配置（比如输出目录到Laravel的resources/views/emails等）...
}

步骤3：模板中统一使用变量 #

所有图片引用不再硬写路径，改用Maizzle的模板语法调用getAssetPath函数：

<!-- 替换硬写的src="images/logo.png" -->
<img src="{{ $getAssetPath('images/logo.png') }}" alt="品牌Logo">

步骤4：依赖安装（仅本地需要） #

如果需要读取Laravel的.env文件，在Maizzle项目根目录执行：

npm install dotenv --save-dev

验证效果 #

• 本地预览：运行maizzle serve，模板会渲染出完整的URL（比如http://your-laravel-app.test/images/logo.png），图片正常加载。
• 生产构建：运行maizzle build production，模板会自动替换为{{ asset('images/logo.png') }}，直接适配Laravel的Blade解析。

内容的提问来源于stack exchange，提问作者Random User