Question

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

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

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

这看起来很明显，所以我假设我错过了什么？

Answer 1

你可以这样做：

设置步骤：

npm install dotenv --save
在require('dotenv').config()文件

webpack.mix.js

在＃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

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

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

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

然后您只需导入并调用env（＆＃39; embedScriptUrl＆＃39;）就像在laravel PHP文件中那样

Answer 3

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

Laravel Mix中的真实ENV值

3 个答案: