vue-cli-plugin-env-enhance

一个增强env的vue-cli插件，使其获得类似vite的体验, 还支持使用 "import.meta.env"。

安装

npm install vue-cli-plugin-env-enhance -D

动机

vue-cli是一个非常好用的vue脚手架，尽管vite成为了主流，但仍有部分场景需要vue-cli， 比如：兼容低版本浏览器、微前端、代码混淆。

但是vue-cli的配置相比vite并不友好，比如以下几点：

1. 无法在vue.config.js以及项目文件中获取当前执行命令的mode
2. mode与NODE_ENV的概念没有完全分离，譬如使用build命令时，如果指定了mode，可能会使NODE_ENV也发生改变，此时必须重新设置 NODE_ENV
3. 无法像vite一样设置.env文件的目录和暴露到客户端的env变量的前缀

我决定增强vue-cli的env，达到堪比vite的使用体验

用法

// vue.config.js
module.exports = {
  /* ... */
  pluginOptions: [
    "env-enhance": {
      /* ...options... */
    },
    
    // also support hump
    "envEnhance": {
      /* ...options... */
    }
  ],
}

选项

| 属性名 | 值 | 描述 | |------------------|-----------------------------------------------------|---------------------------------| | envDir | String (default: process.env()) | 用于加载 .env 文件的目录 | | envPrefix | String | String[] (default: ["VUE_APP_", "VITE_"]) | 以 envPrefix 开头的环境变量会暴露在你的客户端源码中 | | useImportMetaEnv | Boolean (default: true) | 是否把环境变量注入到 "import.meta.env" |

示例

// .env.example
VUE_APP_EXAMPLE = a
VITE_EXAMPLE = b
EXAMPLE = c

// cmd
npx vue-cli-service serve --mode example

// in project file
console.log(process.env)
// {
//   "NODE_ENV": "development",
//   "BASE_URL": "/",
//   "MODE": "example",
//   "PROD": false,
//   "DEV": true,
//   "VUE_APP_EXAMPLE": "a",
//   "VITE_EXAMPLE": "b"
// }
console.log(import.meta.env)
// {
//   "BASE_URL": "/",
//   "MODE": "example",
//   "PROD": false,
//   "DEV": true,
//   "VUE_APP_EXAMPLE": "a",
//   "VITE_EXAMPLE": "b"
// }

注意事项

当你在vue.config.js中使用process.env时，插件还未执行！如果你修改了envDir的值，此时将无法获取到正确的env变量！

为此，插件暴露了两个工具函数getCurrentMode和loadEnv。

如果你一定要修改envDir,并在vue.config.js中使用env变量，请参考以下用法：

// vue.config.js
const { getCurrentMode,loadEnv } = require('vue-cli-plugin-env-enhance/utils')

const mode = getCurrentMode()
console.log(mode)
// 'example'

const env = loadEnv(mode, 'your_env_dir', ['VUE_APP_', 'VITE_'])
console.log(env)
// { VUE_APP_EXAMPLE: 'a', VITE_EXAMPLE: 'b' }

module.exports = {
    /* ... */
}

相关

• vue-cli-plugin-import-meta
• vue-cli-plugin-tsconfig