网站托管的好处,个体户年报网上申报,岳阳网站优化,阿里巴巴企业邮箱提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、dotenv二、使用步骤1.引入库2.添加.env文件3.修改代理配置4.vue文件中如何使用环境变量 总结 前言
webpack 3 Vue2 使用dotenv方式配置多环境 一、dotenv… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 前言一、dotenv二、使用步骤1.引入库2.添加.env文件3.修改代理配置4.vue文件中如何使用环境变量 总结 前言
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 重新配置。
