vue/cle3项目运行报错sockjs-node/info解决方案
vue/cle3项目运行报错sockjs-node/info解决方案
流眸
发布于 2019-08-19 16:50:29
发布于 2019-08-19 16:50:29
bug复现
继上次将vue项目脚手架工具从vue-cli2.x升级到vue-cli3.x后，除了环境、配置问题外，在运行时出现了一些个新的问题。 启动项目后，在内网非本机运行项目时，控制台报错如下：
get http://localhost:8080/sockjs-node/info?t=1462183700002 net::ERR_CONNECTION_REFUSED
[WDS] Disconnected!
get http://localhost:8080/sockjs-node/info?t=1462183700002 net::ERR_CONNECTION_REFUSED
[WDS] Disconnected!
get http://localhost:8080/sockjs-node/info?t=1462183700002 net::ERR_CONNECTION_REFUSED
[WDS] Disconnected!
...webpack.config.js的目前配置如下：
const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);
const env = process.env.NODE_ENV;
module.exports = {
// 基本路径配置，解决打包路径问题
publicPath: './',
// 配置less
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
configureWebpack: (config) => {
// 如果不是开发环境
if (env !== 'development') {
}
// 路径
config.resolve = {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
},
chainWebpack: config => {
// 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('static', resolve('src/static'));
},
}报错分析
首先，sockjs-node是何方神圣？不难查出，sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。那么在各端表现为：
- 服务端：sockjs-node（https://github.com/sockjs/sockjs-node）
- 客户端：sockjs-clien（https://github.com/sockjs/sockjs-client）
vue-cli3.x的启动方式是 npm run serve，我们没有用到该sockjs-node功能，但启动时会默认连续发请求调用本地接口。因此我们要做的就是移除掉它。那么如何移除？
解决方案
分享两种方案
1. 注释法
顾名思义，找到依赖包中的源码，将其注释：
- 进入路径
/node_modules/sockjs-client/dist/sockjs.js - 代码1605行注释掉：
try {
// self.xhr.send(payload); //本行注释
} catch (e) {
self.emit('finish', 0, '');
self._cleanup(false);
}- 重启项目
2. 配置vue.config
vue.config.js中的module.xports中添加如下，然后重启：
devServer: {
proxy: 'http://localhost:8080',
public: '192.168.xxx.xxx:8080' // 本地ip
}以上。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-08-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录