True ENV Values in Laravel Mix

问题

So in Laravel Mix it says in the docs we can add stuff to our .env file prefixed with MIX_ and we can then access it in our JS file when compiled.

I think I may be missing something here though because this doesn't really offer anything along the lines of an env file as the assets are compiled into production mode locally before you push them up to your server. That means the npm run watch and npm run build will both pick up the same env values right?

It works as a kind of global variable thing but not as an environment variable as you can't set the value depending on what the environment is,

This seems kind of obvious so I assume I missing something ??

回答1:

You can do it like this:

Setup steps:

npm install dotenv --save
Add require('dotenv').config() at the top of your webpack.mix.js file
add let webpack = require('webpack') after #2

Now you can inject these into your build by using the DefinePlugin in your mix declaration:

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')
    }
  })
})

Now your bundled files can use process.env.APP_NAME, for instance, in the application. This safe guards you from exposing your .env file to the browser but allows you to easily share global, insecure values through the full stack.

Notes

Note that the process.env does not get replaced with the .env from Laravel, but rather it exposes it through a merge. Therefore if you are passing, for instance, arguments to npm/yarn run dev (such as NODE_ENV=development), then you do not need to declare NODE_ENV in your .env file. If you do, the .env file will take presedence.

回答2:

Here is the way I ended up doing this:

Anyone landing here from google here is how I did this:

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

You then just import and call env('embedScriptUrl') in your front end JS like you would in a laravel PHP file

回答3:

@Ohgodwhy's answer works, but need slight modification for new mix version

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

来源：https://stackoverflow.com/questions/48552089/true-env-values-in-laravel-mix

标签

laravel

laravel-mix