vue 项目的环境变量只能 VUE_APP_ 前缀？

vue cli 官方文档指导中 .env 文件的环境变量，如果需要在前端的文件中使用，必须以 VUE_APP_ 打头命名的变量才能使用到，那么我们有办法突破这个限制吗？那必须安排。

通过 vue inspect 命令查看 webpack 配置文件，发现实际上其原理是通过 webpack 的 DefinePlugin 插件实现的环境变量注入：

/* config.plugin('define') */
new DefinePlugin(
  {
    'process.env': {
      VUE_APP_TITLE: '"LEMON TREE"',
      NODE_ENV: '"development"',
      BASE_URL: '""'
    }
  }
)

在注释中也可以猜测出 vue cli 中对这个插件的命名为 define，那么在 vue.config.js 中，通过 chainWebpack(config) {} 函数就可以轻松的覆盖了。

要注入环境变量，我们就得先读取 .env 文件中的内容，我们可以直接使用已经很成熟的 dotenv 这个库来实现，直接的关键实现代码如下：

const dotEnv = require('dotenv');

const config = {
	/**
	 * @see https://github.com/neutrinojs/webpack-chain
	 **/
	chainWebpack(config) {
		// 处理环境变量
		const baseEnv = dotEnv.config().parsed;
		const modeEnv = dotEnv.config({
			path: path.resolve(__dirname, `.env.${ process.env.NODE_ENV }`),
		}).parsed;
		Object.assign(baseEnv, modeEnv);
		// 我会过滤出以 WD_ 开头的环境变量进行单独的注入，可以根据实际情况调整逻辑即可
		const targetEnv = Object.keys(baseEnv).filter(key => key.startsWith('WD_')).reduce((env, key) => {
			env[key] = baseEnv[key];
			return env;
		}, {});
		// 修改插件的调用参数
		config.plugin('define').tap(args => {
			let arg = args[0];
			Object.assign(arg['process.env'], targetEnv);
			return args;
		});
	}
};

exports = module.exports = config;

webpack-chain 对 webpack 配置的封装还真是很 nice~ , 修改起来很优雅，通过上面的方法就可以很方便的定制环境变量的注入规则了。