Laravel Mix 中的真实 ENV 值

Question

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

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

它作为一种全局变量工作，但不能作为环境变量，因为你不能根据环境设置值，

这似乎很明显，所以我假设我错过了什么？？

Answer 1

@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,
    ]

Answer 2

这是我最终这样做的方式：

任何从谷歌登陆这里的人都是我这样做的：

env.js

let globalEnv = {
  development: {
    embedScriptUrl: 'http://localjspath.js',
    embedCssUrl: 'http://localcsspath.css',
  },
 production: {
    embedScriptUrl: 'https://s3.us-east-2.amazonaws.com/pathtojs.js',
    embedCssUrl: 'https://s3.us-east-2.amazonaws.com/pathtocss.css',
  }
};

export default function env(property){
  return globalEnv[process.env.NODE_ENV][property];
};

然后，您只需在前端 JS 中导入并调用 env('embedScriptUrl')，就像在 laravel PHP 文件中一样

Answer 3

你可以这样做：

设置步骤：

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

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

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 不会被 Laravel 的 .env 替换，而是通过合并将其公开。因此，例如，如果您将参数传递给npm/yarn run dev（例如NODE_ENV=development），则无需在.env 文件中声明NODE_ENV。如果你这样做了，.env 文件将会优先。