webpack 3 + Vue2 使用dotenv配置多环境

本文主要是介绍webpack 3 + Vue2 使用dotenv配置多环境，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

webpack 3 + Vue2 使用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 = /apisVUE_PUBILIC_PATH = site# 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
VUE_OUTPUT_DIR = site#  放置生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir目录)。
VUE_ASSETSDIR = static# 指定生成的 
VUE_INDEX_PATH = index.htmlVUE_PROXY = {"/apis": "http://192.168.1.10:8089"}

3.修改代理配置

修改config/indes.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配置多环境的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---