探索Vue中环境配置的加载：
先来看看Vue CLI关于模式和环境变量的说明，我们看到有这么一段话：想要了解解析环境文件规则的细节，请参考 dotenv。我们也使用 dotenv-expand 来实现变量扩展 (Vue CLI 3.5+ 支持)。我们先用Vue Cli来创建一个Vue项目。
探索第一步：
在package.json中通过执行scripts的命令都使用到了@vue/cli-service包
探索第二步：
@vue/cli-service包确实安装了官网提示的两个依赖包，并在bin目录下的vue-cli-service.js文件中找到了关键类Service。
探索第三步：
- 在
Service中我们找到了加载环境配置的关键函数，其中的两个path分别指:.env.mode和.env.mode.local，也就是我们的环境变量文件可以支持带.local也可以不带。 - 思考
load两次的作用？
探索第四步：
- 指定的前缀是怎么回事？我们在
util目录下找到了答案：resolveClientEnv.js，最终是由DefinePlugin插件加载到了全局的配置中。 - 思考
BASE_URL的设置？
网络异常，图片无法展示
|
为携带webpack的Node项目中增加环境配置
准备webpack.config.js
新增env-helper.js，我们一起来实现一下：
必备依赖装一下
npm install dotenv --save npm install dotenv-expand --save 复制代码
解析环境变量文件
/** * 解析环境变量文件 * @param {*} mode */ const loadEnv = (mode) => { const basePath = path.resolve(__dirname, `.env${mode ? `.${mode}` : ``}`); const localPath = `${basePath}.local`; const load = (envPath) => { try { const env = dotenv.config({ path: envPath, debug: process.env.DEBUG }); dotenvExpand(env); } catch (err) { if (err.toString().indexOf("ENOENT") < 0) { console.error(err); } } }; load(localPath); load(basePath); }; 复制代码
符合前缀的环境变量对象
将符合正则条件的和特殊的进行整合后返回，通过注入到
DefinePlugin插件中。
/** * 获取符合前缀规则的环境变量对象 */ const prefixRE = /^XXTX_APP_/; const resolveClientEnv = () => { const env = {}; Object.keys(process.env).forEach((key) => { if (prefixRE.test(key) || key === "NODE_ENV") { env[key] = process.env[key]; } }); return env; }; 复制代码
升级webpack.config.js来演示环境变量读取
增加演示插件和NODE_ENV配置
const webpack = require("webpack"); const { loadEnv, resolveClientEnv } = require("./env-helper"); // 解析环境配置文件 // 通过cross-env 再scripts中配置NODE_ENV=development loadEnv(process.env.NODE_ENV); // 获取符合规则的环境配置对象 const env = resolveClientEnv(); const HelloWorldPlugin = require("./hello-world"); module.exports = { mode: "development", plugins: [ new webpack.DefinePlugin(env), new HelloWorldPlugin({ options: true }), ], }; 复制代码
在我们的webpack插件中使用环境变量
class HelloWorldPlugin { apply(compiler) { compiler.hooks.done.tap("HelloWorldPlugin", () => { console.log("Hello World!"); console.log("[ XXTX_APP_NAME ] >", process.env.XXTX_APP_NAME); console.log("[ XXTX_APP_BASE_URL ] >", process.env.XXTX_APP_BASE_URL); }); } } module.exports = HelloWorldPlugin; 复制代码
查看输出结果
结尾说明：
- 我们可以将
env-helper.js移植到其他的Node项目中只是挂载配置的方式更改即可。 - 此次的代码全靠CV大法，你学到了吗？
