First, follow the craco Installation Instructions to install the craco package, create a craco.config.js file, and modify the scripts in your package.json.

Then install craco-plugin-env:

$ yarn add craco-plugin-env -D

# OR

$ npm i craco-plugin-env -D

Add the plugin into your craco.config.js.

/* craco.config.js */

const CracoEnvPlugin = require('craco-plugin-env')

module.exports = {
  plugins: [
    {
      plugin: CracoEnvPlugin,
      options: {
        variables: {}
      }
    }
  ]
}

You can pass an options object to configure the plugin.

• options.variables

  • Default: {}
  • Custom additional environment variables. For more detailed env parsing rules, please refer to the documentation of dotenv.

• options.envDir ^1.0.5

  • Default: process.cwd()
  • The directory from which .env files are loaded. Can be an absolute path, or a path relative to the project root.

You can specify env variables by placing the following files in your project root:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

You can overwrite the default mode used for a command by passing the --mode option flag. For example, if you want to use development variables in the build command:

/* package.json */

"scripts": {
    "start": "craco start",
    "build": "craco build",
+   "build:dev": "craco build --mode development"
}

You can refer to the documentation of Vue CLI.