1 .vue文件中寫法
data(){
return {
ws: null,
wsUrl: `ws://${location.host}/wsct`,
}
}
........
wsInit(){
this.ws = new WebSocket(this.wsUrl);
}
.........
2 配置開發(fā)環(huán)境打包規(guī)則，一般在vue.config.js中
devServer: {
......
proxy: {
// 代理websocket請(qǐng)求
'/wsct': {
target: '真正開發(fā)環(huán)境的websoket地址',
changeOrigin: true,//是否允許跨域
pathRewrite: {
'^/wsct': '',//重寫,
},
ws: true //開啟ws
}
}
},
3 線上nginx代理websocket請(qǐng)求
server{
location /wsct{
proxy_pass '線上websoket地址';
# 開啟nginx對(duì)websocket的支持
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-514808.html
文章來源：http://www.zghlxwxcb.cn/news/detail-514808.html
到了這里，關(guān)于vue項(xiàng)目部署在nginx，vue開發(fā)環(huán)境代理websocket請(qǐng)求，線上nginx代理websocket請(qǐng)求。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
