Vue/CLI Plugin for replace --mode with NODE_ENV

This plugin is to use of replace --mode value with NODE_ENV when running build, serve commands, and help us show some important env values before compiling.

Install

npm i -s @asika32764/vue-cli-plugin-node-env

# OR

yarn add @asika32764/vue-cli-plugin-node-env

Usage

Just put NODE_ENV before running.

1$ NODE_ENV=development npm run build

Shows

1> vue-cli-service build
2
3  Building for development...
4

Show ENV before Building

Add this config to vue.config.js:

1module.exports = {
2  //...
3  pluginOptions: {
4    showEnv: [
5      'VUE_APP_API_ENDPOINT',
6      'VUE_APP_DEBUG'
7    ]
8  }
9  // ...
10}

Then when run npm run serve or build, this env will show up:

1> vue-cli-service build
2
3ENVIRONMENT VARIABLES
4  VUE_APP_API_ENDPOINT: https://your-site.com/api/v1/
5  VUE_APP_DEBUG: 1
6
7  Building for development...

Use Different Mode for .env File and Building

If you want to use different env between .env.{mode} and build mode, you can use BUILD_MODE env.

1NODE_ENV=staging BUILD_MODE=production yarn build

Use on Ionic

This plugin is also useful for some Vue CLI wrapper like Ionic.

1NODE_ENV=staging BUILD_MODE=production ionic capacitor run ios