@champkeh/vue-cli-plugin-inspect-env

vue-cli plugin to inspect environment variables

Usage no npm install needed!

<script type="module">
  import champkehVueCliPluginInspectEnv from 'https://cdn.skypack.dev/@champkeh/vue-cli-plugin-inspect-env';
</script>

README

vue-cli-plugin-inspect-env

Vue CLI 3+ Plugin that add inspect-env command to vue-cli-service for easier inspect environment variables.

为vue-cli-service的添加一个inspect-env命令，用于查看本次构建时最终环境变量的值，方便在配置环境时进行调试。

Install

vue add @champkeh/inspect-env

Config

对每一个构建命令都添加对应的inspect-env命令，可查看对应构建的环境变量。

package.json中的scripts配置如下：

{
  "scripts": {
    "serve": "cross-env NODE_ENV=development vue-cli-service serve --mode development",
    "build:test": "cross-env NODE_ENV=production vue-cli-service build --mode test",
    "build:uat": "cross-env NODE_ENV=production vue-cli-service build --mode uat",
    "build:release": "cross-env NODE_ENV=production vue-cli-service build --mode production",
    "inspect-env:dev": "cross-env NODE_ENV=development vue-cli-service inspect-env --mode development",
    "inspect-env:test": "cross-env NODE_ENV=production vue-cli-service inspect-env --mode test",
    "inspect-env:uat": "cross-env NODE_ENV=production vue-cli-service inspect-env --mode uat",
    "inspect-env:prod": "cross-env NODE_ENV=production vue-cli-service inspect-env --mode production"
  }
}

Usage

# 查看开发环境的配置
npm run inspect-env:dev

# 查看uat环境的配置
npm run inspect-env:uat