Webpack 3 与 Vue 2 集成 dotenv 实现多环境配置
本文详解在 Webpack 3 和 Vue 2 项目中如何利用 dotenv 库实现多环境配置。通过引入 dotenv 并创建 .env 文件，按优先级加载环境变量。文章涵盖代理配置修改、DefinePlugin 注入变量至 Vue 组件等关键步骤，帮助开发者灵活管理不同部署环境的配置参数。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
介绍在 Webpack 3 结合 Vue 2 的技术栈中，采用 dotenv 方案进行多环境配置的具体方法。
一、dotenv
该工具的主要作用是将环境变量从 .env 文件加载到 process.env 对象中。
二、使用步骤
1.引入库
yarn add dotenv --dev 2.添加.env文件
在此步骤中需要添加 .env、.env.dev、.env.dev.local 以及 .env.production 等文件。通常情况下，.env.dev.local 文件不会被提交到 git 仓库。环境变量的覆盖顺序遵循以下优先级：.env.*.local > .env.* > .env。
# port
VUE_PORT = 3200
# 应用接口上下文
VUE_APP_CONTEXT_NEW = /CONT
# API请求前缀
VUE_APP_API_PREFIX = /apis
VUE_PUBILIC_PATH = site
# 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
VUE_OUTPUT_DIR = site
# 放置生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir目录)。
VUE_ASSETSDIR = static
# 指定生成的
VUE_INDEX_PATH = index.html
VUE_PROXY = {"/apis": "http://192.168.1.10:8089"}3.修改代理配置
需要修改 config/index.js 文件，具体路径需根据实际项目配置进行调整。
const dotenv = require("dotenv");
const fs = require("node:fs");
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const pathsDotenv = resolveApp(".env");
dotenv.config({ path: `${pathsDotenv}.${process.env.NODE_ENV}.local` });
dotenv.config({ path: `${pathsDotenv}.${process.env.NODE_ENV}` });
dotenv.config({ path: pathsDotenv });
console.log("【process.env.VUE_PORT】", process.env.VUE_PORT);
console.log("【process.env.VUE_PROXY】", process.env.VUE_PROXY);
const createProxy = obj => {
const ret = {};
const httpsRE = /^https:\/\/\/;
if (obj) {
obj = JSON.parse(obj);
for (const prefix in obj) {
const target = obj[prefix];
const isHttps = httpsRE.test(target);
ret[prefix] = {
target: target,
changeOrigin: true,
ws: true,
pathRewrite: path => path.replace(new RegExp(`^${prefix}`), ""),
...(isHttps ? { secure: false } : {})
};
}
}
console.debug(ret);
return ret;
};
....
// 这个地方可以使用函数方式，都一样，改proxyTable就可以了。
module.exports = {
dev: {
....
proxyTable: createProxy(process.env.VUE_PROXY)
....
}
}
....4.vue文件中如何使用环境变量
修改 webpack.base.conf.js 文件。根据实际需求配置所需的变量。
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || "development"),
VUE_APP_CONTEXT: JSON.stringify(
process.env.VUE_APP_CONTEXT || "/CONTEXT"
),
VUE_APP_API_PREFIX: JSON.stringify(
process.env.VUE_APP_API_PREFIX || "/contextapi"
)
}
}),总结
env 文件中的变量可以在配置文件中直接使用，而在 Vue 页面中使用时，需要在 webpack.base.conf.js 中重新配置。
到此这篇关于 webpack 3 + Vue2 使用 dotenv 配置多环境的文章就介绍到这了，更多相关 webpack 配置多环境内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
UmiJS 项目中 Jest 单元测试与 Playwright E2E 测试配置
2026-11-05 10:22:24
JavaScript Ajax请求遇到CORS跨域报错怎么解决
2026-11-04 18:25:04
Webpack HMR 热更新原理与配置详解
2026-11-01 02:44:12
解决Webpack配置热更新后页面全刷新的问题
2026-10-31 08:39:50
uni-app 基于 Vue CLI 创建项目及打包部署完整指南
2026-10-31 07:59:40