laravel-mix - 升级到 Laravel MIX 6 后传入环境变量

Question

升级到 Laravel-Mix 6 之前:

• Laravel-Mix 版本:5.0.9(支持 Webpack 4)
• NPM 版本:6.14.5

通过这个 laravel 混合版本，我能够通过运行 package.json 中定义的 npm 脚本将环境变量传递给 webpack.mix.js:

"dev": "cross-env NODE_ENV=development ENV_FILE=./.env.local node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-混合/设置/webpack.config.js"

...

"production": "cross-env NODE_ENV=production ENV_FILE=./.env.production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js”

然后我可以访问 webpack.mix.js 中的变量，其值取决于我是在生产模式还是开发模式下运行:

let mix = require("laravel-mix");
mix.env(process.env.ENV_FILE);

这很好用!

升级到 Laravel-Mix 6 后:

• Laravel Mix 版本:6.0.19(支持 Webpack 5)
• NPM 版本:6.14.5

我遵循了 laravel documentation 的建议包括 npm 脚本的更新...

按照文档中关于如何将环境变量传递给 Webpack CLI 的说明(请引用 https://laravel-mix.com/docs/6.0/cli#pass-options-to-webpack-cli )，然后 npm 脚本更改如下:

"dev": "mix -- --env ENV_FILE=./.env.local",

"production": "mix --production -- --env ENV_FILE=./.env.production"

问题是，我无法再通过 process.env.ENV_FILE 访问 webpack.mix.js 中的环境变量。它的值未定义...

我已经通过 console.log 在 node_modules/laravel-mix/setup/webpack.config.js 中检查过，确实传入了变量:

const { assertSupportedNodeVersion } = require('../src/Engine');

module.exports = async (config) => {
    assertSupportedNodeVersion();
    
    console.log("ENV_FILE: ", config.ENV_FILE);

    const mix = require('../src/Mix').primary;

    require(mix.paths.mix());

    await mix.installDependencies();
    await mix.init();

    return mix.build();
};

并且通过运行例如 npm run dev 我可以看到注销的值:

mix -- --env ENV_FILE=./.env.local

ENV_FILE: ./.env.local

那么问题来了，为什么我不能访问webpack.mix.js中的环境变量，更重要的是，我该怎么做。

在此先感谢您的帮助!

Answer 1

Laravel Mix 6 / Customize the Mix Configuration Path

不再需要通过 env 参数传递设置 - 只需使用 --mix-config 选项为每个脚本变体指定不同的 webpack.mix.js 文件，并合并任何其他设置(静态)进入这些:

"dev": "mix --mix-config=webpack.mix.dev.js",
"production": "mix --mix-config=webpack.mix.prod.js --production"

等当然，您仍然可以 require 包含实际混合逻辑的通用 webpack.mix.js。