在前端项目中使用webpack的环境变量
最近在折腾项目中，有时候会需要在前端项目中使用环境变量，比如在webpack.prod.js或者webpack.dev.js中使用。找了一些解决办法，最后有了这篇文章。
定义环境变量
在根目录下创建.env文件
base.env
1#基础配置，不管开发或者测试环境都用得到,使用CUSTOMIZE前缀，和node的环境变量区分
2CUSTOMIZE_APP_TITLE=一个系统
dev.env
1#测试开发环境信息
2CUSTOMIZE_PORT=8081
3CUSTOMIZE_SERVER_URL='http://localhost:8000'
4CUSTOMIZE_MODE='development'
prod.env
1#正式环境信息
2CUSTOMIZE_MODE='production'
3CUSTOMIZE_PORT=80
4CUSTOMIZE_SERVER_URL='~api'
使用环境变量
在webpack中使用
使用dotenv插件直接帮我们加入变量到process.env,同时可以引入多个，并且可以覆盖，详细文档dotenv
1// webpack.prod.js or webpack.dev.js
2 // 省略些代码
3 const dotenv = require('dotenv');// 引入插件
4 dotenv.config({ path: ['dev.env', 'base.env'], override: true });// 加载.env文件,并且覆盖,
5 console.log(process.env.CUSTOMIZE_APP_TITLE);// 一个系统
6 // 省略些代码
在前端页面中使用
相对直接在webpack中使用，我们要保证页面编译通过;就需要使用到webpack.DefinePlugin,一个插件把变量注入到全局;
dotenv.config()会返回一个处理好的对象
1// 省略些代码
2 const _dotenv = dotenv.config({ path: ['dev.env', 'base.env'], override: true })
3 console.log(_dotenv)
4 // 省略些代码
5 /*{
6 parse:{ CUSTOMIZE_APP_TITLE: '一个系统', CUSTOMIZE_MODE: 'development', CUSTOMIZE_PORT: '8081', CUSTOMIZE_SERVER_URL: 'http://localhost:8000' }
7 }*/
webpack.DefinePlugin使用方式
webpack.dev.js 里配置
1// 省略些代码
2module.exports = {
3 plugins: [
4 new webpack.DefinePlugin({
5 'process.env.CUSTOMIZE_MODE': JSON.stringify('CUSTOMIZE_MODE')
6 })
7 ]
8}
9// 省略些代码
在页面中使用
1baseURL: process.env.CUSTOMIZE_MODE === 'production' ? process.env.CUSTOMIZE_SERVER_URL : '/api',
总结一下页面使用
配置
1// webpack.prod.js or webpack.dev.js
2 // 省略
3 const dotenv = require('dotenv');// 引入插件
4 const _dotenv = dotenv.config({ path: ['dev.env', 'base.env'], override: true });// 加载.env文件,并且覆盖,
5 console.log(process.env.CUSTOMIZE_APP_TITLE);// 一个系统
6 module.exports = {
7 plugins: [
8 new webpack.DefinePlugin(generateEnv(_dotenv.parse))
9 ]
10 }
11 /**
12 * 根据提供的解析数据生成环境对象。
13 *
14 * @param {Object} parsed - 解析数据对象。
15 * @return {Object} 生成的环境对象。
16 */
17 function generateEnv(parsed) {
18 const env = {};
19 Object.keys(parsed).forEach(key => {
20 const value = parsed[key];
21 if (value && value !== null) {
22 env[`process.env.${key}`] = JSON.stringify(value);
23 }
24 });
25 return env;
26 }
27 // 省略些代码
使用
1import { FC } from 'react';
2import { Outlet } from 'react-router-dom';
3import './index.scss';
4
5const User: FC = () => {
6 return (
7 <div className="user-main">
8 <div className="user-container">
9 <div className="title">{process.env.CUSTOMIZE_APP_TITLE}</div>
10 <Outlet />
11 </div>
12 </div>
13 );
14};
15export default User;
注意：如果使用了ts，可能会出现报错 process is not defined
定义一下全局ts类型
1declare const process: {
2 env: {
3 [key: string]: string;
4 };
5 [key: string]: unknown;
6};
谢谢观看🙂️../../../src/components/Tag
