使用Laravel特使部署时，app.js无法获取环境变量

Question

我想使用特使部署我的应用程序，以确保零停机。经过一番研究，我发现这个剧本正是我想要的。https://github.com/papertank/envoy-deploy

基本上，对于后端来说，一切都很好。我可以克隆项目，执行所有命令，并将其指向最新的项目。之后，我为我的vue组件添加了一个新的npm任务。这是的任务

@task('deployment_assets')
echo 'Running npm'
cd {{ $release }}
sudo npm ci --production
sudo npm audit fix --only=prod
sudo npm run prod
@endtask

为了做到这一点，我将我的laravel混合相关依赖从devDependencies移到了依赖。

"dependencies": {
"laravel-mix": "^6.0.31",
"resolve-url-loader": "^4.0.0",
"sass": "~1.32.0",
"sass-loader": "^11.0.1",
"vue-loader": "^15.9.5",
"webpack": "^5.23.0"
},

在运行任务时，第一个问题出现了，我的webpack.mix.js似乎无法读取变量。调用process.env.APP_URL时，返回未定义的结果。这就是语法。

if (process.env.APP_URL.match(/https?://.*/.+/)) {
mix.setResourceRoot(process.env.APP_URL);
}

这是我的.env，看起来像

APP_DEBUG=true
APP_URL=http://homestead.test

在我检查了laravel混合问题后，他们建议使用

require('dotenv').config({ path: '~/www/app/.env'});

以加载环境变量。

因此，我将webpack.mix.js更改为

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

好的，它起作用了，现在我可以通过process.env检索所有变量了。任务完成了。然后，当我导航到我的项目时，第二个问题发生了。

我的app.js无法获取process.env，当我控制台.log(process.ev(时，它返回了｛｝

if (process.env.APP_URL.match(/https?://.*/.+/)) {
//
}

我可以确认.env在那里，否则它在运行npm run prod时会抛出错误。只是不确定为什么它无法在app.js 中检索env变量

我知道这可能不是在生产中编译资产的最佳实践。但这对我的情况来说是必要的，因为我的vue组件共享.env文件中的相同环境变量，所以我需要在服务器中编译资产，以确保它使用production.env文件。

有人知道怎么解决这个问题吗？

Answer 1

好的，经过一些故障排除，可以确认在mix中获取环境变量，前缀为mix_的是必须的。确保在替换.env变量后运行php artisan config:cache，使变量成为最新版本，一开始我很困惑为什么删除前缀MIX_后它仍然有效，结果发现这是缓存问题。