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. 在＃2之后添加let webpack = require('webpack')

现在，您可以使用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不会被Laravel的.env取代，而是通过合并暴露它。因此，如果您传递npm/yarn run dev的参数（例如NODE_ENV=development），那么您不需要在.env文件中声明NODE_ENV。如果你这样做，.env文件将采取行动。

Answer 2

这是我最终做到这一点的方式：

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

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];
};

然后你就像在laravel PHP文件中一样导入并调用前端JS中的env（'embedScriptUrl'）