1 .vue文件中写法
data(){
return {
ws: null,
wsUrl: `ws://${location.host}/wsct`,
}
}
........
wsInit(){
this.ws = new WebSocket(this.wsUrl);
}
.........
2 配置开发环境打包规则，一般在vue.config.js中
devServer: {
......
proxy: {
// 代理websocket请求
'/wsct': {
target: '真正开发环境的websoket地址',
changeOrigin: true,//是否允许跨域
pathRewrite: {
'^/wsct': '',//重写,
},
ws: true //开启ws
}
}
},
3 线上nginx代理websocket请求
server{
location /wsct{
proxy_pass '线上websoket地址';
# 开启nginx对websocket的支持
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
文章来源地址https://www.toymoban.com/news/detail-514808.html
文章来源：https://www.toymoban.com/news/detail-514808.html
到了这里，关于vue项目部署在nginx，vue开发环境代理websocket请求，线上nginx代理websocket请求。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
