使用Laravel Envoy部署时app.js无法读取环境变量问题求解

架构老林

2026-9-26

问题根源

process.env 是 Node.js 运行时的全局变量，仅在服务端编译阶段有效，浏览器环境本身不存在该对象。你在 webpack.mix.js 中能读取到环境变量，是因为该文件是 Node 执行编译任务时运行的；而编译完成打包到 app.js 中的代码运行在浏览器端，webpack 默认不会把服务端的 process.env 变量注入到前端产物中，所以你才会拿到空对象。

解决方案

方案一：使用 Laravel Mix 原生支持的前缀规则（推荐）

Laravel Mix 本身内置了环境变量注入逻辑，只要你将 .env 文件中需要暴露给前端的变量加上 MIX_ 前缀，编译时会自动注入到前端的 process.env 对象中。
操作步骤：

修改 .env 文件，复用原有配置新增带前缀的变量：

APP_DEBUG=true
APP_URL=http://homestead.test
MIX_APP_URL=${APP_URL}

修改前端业务代码，引用加了前缀的变量：

if (process.env.MIX_APP_URL.match(/https?:\/\/.*\/.+/)) {
// 业务逻辑
}

该方案不需要额外修改 webpack 配置，适配 Mix 的原生设计，维护成本最低。

方案二：手动配置 DefinePlugin 注入变量

如果你不想修改原有变量名，可以手动配置 webpack 的 DefinePlugin 插件，把需要的环境变量注入到前端产物中。
修改你的 webpack.mix.js 新增如下配置：

const mix = require('laravel-mix');
const webpack = require('webpack');
require('dotenv').config({ path: '~/code/app/.env'});

mix.webpackConfig({
    plugins: [
        new webpack.DefinePlugin({
            // 所有需要暴露给前端的环境变量都需要在这里声明
            'process.env.APP_URL': JSON.stringify(process.env.APP_URL),
            'process.env.APP_DEBUG': JSON.stringify(process.env.APP_DEBUG)
        })
    ]
});

注意：必须用JSON.stringify包裹变量值，否则注入的是变量名的字面量而非实际值，会导致运行时报错。