vue配置启动后终端显示localhost和ip访问地址

1、首先设置localhost和本地ip访问
在config文件下的index.js文件中,修改host为:

host: '0.0.0.0',
port: 8080,

2、设置启动后终端显示localhost和network访问地址
修改build文件下webpack.dev.conf.js文件里compilationSuccessInfo的messages属性值

compilationSuccessInfo: {
          // 修改启动后终端显示localhost和network访问地址
          messages: [
            `App runing at: `,
            `Local: http://localhost:${port}`,
            `Network: http://${require('ip').address()}:${port}`,
          ],
        }

进行上面的2步的配置后,就可以进行localhost访问和ip地址访问了

转载:https://blog.csdn.net/qq_41497443/article/details/108577543

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue CLI 4中解决跨域问题后,可以通过localhost访问接口,但使用IP地址无法被解析,导致请求路径出错的问题,可能是由于以下原因导致的: 1. 浏览器的同源策略:同源策略要求请求的协议、域名、端口均相同。使用localhost访问时,请求的协议、域名和端口均为相同的localhost,符合同源策略,因此能够正常访问接口;而使用IP地址访问时,与localhost的域名不同,不符合同源策略,浏览器会拦截请求。 2. API配置问题:可能在Vue项目中配置了跨域请求时,只允许localhost的请求通过,而将IP地址没有添加到允许列表中,导致请求路径出错。 解决此问题的方法如下: 1. 配置vue.config.js:在Vue项目的根目录下找到vue.config.js文件,如果没有则手动创建。在该文件中,添加devServer选项,设置proxy代理,将需要访问的API接口的域名和端口添加到proxy的target中,示例代码如下: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 需要访问的API接口的域名和端口 ws: true, changeOrigin: true } } } }; ``` 2. 使用IP地址访问:在Vue项目中,使用IP地址访问API接口时,将请求路径改为相对路径,如`/api/getData`,而不是绝对路径`http://localhost:8080/api/getData`。这样配置后,不论使用localhost还是IP地址访问,请求都会通过proxy转发到正确的接口地址。 通过以上操作,可以解决在Vue CLI 4中使用IP地址访问接口无法解析导致请求路径出错的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值