vue/cli3项目运行报错sockjs-node/info解决方案

bug复现

  继上次将vue项目脚手架工具从vue-cli2.x升级到vue-cli3.x后,除了环境、配置问题外,在运行时出现了一些个新的问题。
  启动项目后,在内网非本机运行项目时,控制台报错如下:

1
2
3
4
5
6
7
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的目前配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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服务器之间通信通道。那么在各端表现为:

  vue-cli3.x的启动方式是npm run serve,我们没有用到该sockjs-node功能,但启动时会默认连续发请求调用本地接口。因此我们要做的就是移除掉它。那么如何移除?

解决方案

  分享两种方案

1. 注释法

  顾名思义,找到依赖包中的源码,将其注释:

  1. 进入路径/node_modules/sockjs-client/dist/sockjs.js
  2. 代码1605行注释掉:

    1
    2
    3
    4
    5
    6
    try {
    // self.xhr.send(payload); //本行注释
    } catch (e) {
    self.emit('finish', 0, '');
    self._cleanup(false);
    }
  3. 重启项目

2. 配置vue.config

  vue.config.js中的module.xports中添加如下,然后重启:

1
2
3
4
devServer: {
proxy: 'http://localhost:8080',
public: '192.168.xxx.xxx:8080' // 本地ip
}

---本文结束感谢您的阅读---

本文标题:vue/cli3项目运行报错sockjs-node/info解决方案

文章作者:Lomo 朱幸民

发布时间:2019年08月13日 - 17:07:31

最后更新:2019年08月13日 - 17:39:53

原始链接:https://www.zhuxingmin.com/2019/08/13/vue-cli3项目运行报错sockjs-node-info解决方案/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%