Laravel Mix 中的真实 ENV 值

Question

因此，在 Laravel Mix 中，它在文档中说我们可以将内容添加到以 MIX_ 为前缀的 .env 文件中，然后我们可以在编译时在我们的 JS 文件中访问它。

我想我可能在这里遗漏了一些东西，因为这并没有真正提供 env 文件的任何内容，因为资产在将它们推送到服务器之前已在本地编译为生产模式。这意味着 npm run watch 和 npm run build 都会选择相同的 env 值，对吗？

它作为一种全局变量而不是环境变量，因为您无法根据环境设置值，

这似乎很明显，所以我认为我遗漏了什么？

Answer 1

你可以这样做：

设置步骤：

1. npm install dotenv --save
2. require('dotenv').config()在webpack.mix.js文件顶部添加
3. let webpack = require('webpack')在#2之后添加

现在，您可以通过DefinePlugin在mix声明中使用 将这些注入到您的构建中：

mix.webpackConfig({
  //...
  new webpack.DefinePlugin({
    'process.env': {
      APP_NAME: JSON.stringify(process.env.APP_NAME || 'Default app name'),
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
  })
})

例如，现在您的bundled文件可以process.env.APP_NAME在应用程序中使用。这可以防止您将.env文件暴露给浏览器，但允许您通过完整堆栈轻松共享全局、不安全的值。

笔记

请注意，process.env不会被.envfrom Laravel替换，而是通过合并公开它。因此，例如，如果您将参数传递给npm/yarn run dev（例如NODE_ENV=development），则无需NODE_ENV在 .env 文件中声明。如果这样做，该.env文件将优先。

Answer 2

@Ohgodwhy 的答案有效，但需要对新混合版本稍作修改

require('dotenv').config()
let webpack = require('webpack')

let dotenvplugin = new webpack.DefinePlugin({
    'process.env': {
        APP_NAME: JSON.stringify(process.env.APP_NAME || 'Default app name'),
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
})

mix.webpackConfig({
    ...
    plugins: [
        dotenvplugin,
    ]