vue项目代理配置ip地址和端口号
在vue.config.js文件中,有几个嫌疑对象,port,host,target,一般host设置为0.0.0.0,大概就是自动匹配本机任意的ip地址,有啥用啥,感兴趣的可以自行搜索,这算是比较方便的写法,说是电脑手机都可以访问。port是本机的端口号,找一个能用的端口就行,像8080,90等等。proxy里面的target就是代理,process是过程,就是项目启动的全局变量,process
在vue.config.js文件中,有几个嫌疑对象,port,host,target,一般host设置为0.0.0.0,大概就是自动匹配本机任意的ip地址,有啥用啥,感兴趣的可以自行搜索,这算是比较方便的写法,说是电脑手机都可以访问。port是本机的端口号,找一个能用的端口就行,像8080,90等等。
proxy里面的target就是代理,process是过程,就是项目启动的全局变量,process.env打印出来就是项目跑起来需要的环境,是一个环境变量,配合各种场景使用(应该是这么理解的吧too sad too bad)后面的VUE_APP_BASE_API是人为命名的,这个是一个拼接的地址,我们在这里设置的VUE_APP_BASE_API=/dev-api,意思是,只要给后端发送的地址有dev-api,我们就给他前面拼接上target这个代理的前缀,虽然在本机上还是localhost:8080/dev-api....(8080就是设置的port),但因为有了代理,其实给后端发送的就变成了10.155.40.12:8081/dev-api....(前面的地址是设置的target),这样子就能够完成代理,向后端请求数据了,天呐,我弄明白了。
const port = process.env.port || process.env.npm_config_port || 8082 // 端口
devServer: {
host: '0.0.0.0',
port: port,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://10.155.40.12:8081`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
}
更多推荐
所有评论(0)