vue项目接口地址暴露_完美解决通过IP地址访问VUE项目的问题

第一步

1.将config里面的host设置成0.0.0.0

host: "0.0.0.0",

2.修改package.json

"scripts": {

"start": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

}

第一步和第二步都有ip,其实第二步优先级高,这里第二步的host可以不设置,vue默认执行第一步的设置

3.查看开发机的ip地址,并告诉给其他小伙伴,还有端口号

补充知识:vue项目通过本地ip实现真机调试

使用webpack打包后

cmd 输入 IPCONFIG 拿这个地址

af7531f09698fe8cb45524c8e761620a.png

然后去package.json 在dev里面输入 你的ip

9d9018798f204138449c503ae96de714.png

然后npm run dev 运行即刻

你的电脑 链接的wifi 需要和别人想访问的设备链接的wifi 一致 否则ip不一致无法调试

以上这篇完美解决通过IP地址访问VUE项目的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持云海天教程。

原文链接:https://www.cnblogs.com/Ingots/p/12806788.html

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 抱歉,我可以回答这个问题Vue可以通过修改webpack配置文件中的devServer项来动态配置IP地址,同时需要在后端服务器中配置允许跨域请求。具体的步骤可以参考Vue官方文档或者其他开源社区的教程。 ### 回答2: Vue项目多地IP地址部署是指将项目部署到不同的地方,每个地方都有不同的IP地址。 实现多地IP地址部署主要需要以下几个步骤: 1. 确定各个地方的IP地址:根据实际情况,找到每个地方的IP地址,可以是局域网的内网IP地址,也可以是公网的外网IP地址。 2. 配置Vue项目的部署文件:在Vue项目的部署文件中,将各地的IP地址按照不同的环境进行配置。可以使用环境变量来实现动态配置,比如在配置文件中定义一个变量,根据不同的环境去读取相应的IP地址。 3. 后台配置动态IP:后台配置动态IP主要是指在服务器端根据不同的请求动态返回相应的IP地址。可以通过在后台数据库中存储各地的IP地址信息,根据请求的参数或者请求的地理位置信息,动态返回相应的IP地址。 通过以上步骤,就可以实现Vue项目的多地IP地址部署和后台配置动态IP的需求。这样可以根据不同的地方灵活部署项目,并且通过后台配置动态IP可以根据不同的请求返回相应的IP地址,提供更好的用户体验。 ### 回答3: Vue.js是一种前端开发框架,可以轻松实现跨平台和多地部署。对于Vue项目的多地IP地址部署,我们需要相应的后台配置来实现动态IP。 首先,我们需要在后台配置文件中添加一个IP地址的配置项。配置项可以是一个数组,含了所有需要部署的IP地址。例如,配置项可以是如下的形式: ``` ipList: ["192.168.1.100", "192.168.1.101", "192.168.1.102"] ``` 然后,在Vue项目中,我们需要获取后台动态配置的IP地址,并根据这些IP地址来请求后端接口。这可以通过在Vue的API请求封装中实现。例如,我们可以创建一个`api.js`文件,用来封装所有的API请求。 首先,在`api.js`中引入Vue和Axios: ``` import Vue from 'vue' import axios from 'axios' ``` 然后,我们在`api.js`中定义一个`getBaseUrl`函数,用来获取后台配置的动态IP地址: ``` function getBaseUrl() { // 这里可以根据需求获取后台配置的动态IP地址 // 返回可用的IP地址 } ``` 接下来,在`api.js`中定义所有的API请求,例如: ``` export function getUserInfo() { const baseUrl = getBaseUrl() return axios.get(baseUrl + '/api/user/info') } ``` 在这个例子中,我们使用`getBaseUrl`函数获取后台配置的动态IP地址,并拼接上对应的API路径来进行请求。 最后,在Vue组件中使用这些API请求即可: ``` import { getUserInfo } from '@/api' export default { mounted() { getUserInfo().then(res => { // 处理请求返回的数据 }) } } ``` 通过以上步骤,我们可以实现Vue项目的多地IP地址部署,并且后台配置动态IP。这样,不同的部署地点可以根据需求动态配置IP地址,实现灵活的部署和管理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值