专栏首页前端技术分享|前沿资讯|读书分享vue/cle3项目运行报错sockjs-node/info解决方案

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

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. 注释法

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

  1. 进入路径 /node_modules/sockjs-client/dist/sockjs.js
  2. 代码1605行注释掉:
try {
        // self.xhr.send(payload);  //本行注释
    } catch (e) {
        self.emit('finish', 0, '');
        self._cleanup(false);
    }
  1. 重启项目

2. 配置vue.config

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

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

以上。

本文分享自微信公众号 - 流眸(zxm0146),作者:流眸

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • lib-flexible适配大屏方案(附移动端适配)

      相信大多数移动端前端开发者都是用过 lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件,属于开源项...

    流眸
  • vue中@change兼容问题

    问题:兼容性差距,由于@change触发方式不同,导致时间加载不够统一,时间触发出现问题。

    流眸
  • vue-cli 脚手架升级踩坑记录

      随vue技术逐渐成熟,开发者们热爱的脚手架vue-cli也一步步升级优化。在体验度不断上升的过程中,也必不可少的要踩一些坑。  本篇主要记录下在vue-cl...

    流眸
  • [Centos7]open读取文件报错:TypeError

    贰叁壹小窝
  • 图像纹理——灰度共生矩阵

    灰度共生矩阵(GLDM)的统计方法是20世纪70年代初由R.Haralick等人提出的,它是在假定图像中各像素间的空间分布关系包含了图像纹理信息的前提下,提出的...

    bye
  • 前端吐血推荐的必读书籍

    自古以来就有书中自有黄金屋,书中自有颜如玉。前阵子当当搞活动,买书满 200 减 100,但是很多同学给我留言让我推荐书籍,当时是真没空,现在有空了把我看过的一...

    桃翁
  • 稀疏数组 & 环形队列

    1、是什么? 比如有一个 11 * 11 的五子棋盘,我们要用程序模拟,那肯定就是二维数组。然后用1表示黑子,2表示白子,假如现在棋盘上只有一个黑子一个白子,...

    贪挽懒月
  • Web前端开发应该必备的编码原则

    今天小编要跟大家分享的文章是关于Web前端开发应该必备的编码原则。HTML已经走过了20几年的发展历程,它几乎见证了整个互联网的发展。但是,即便到现在,有很多基...

    用户5827212
  • FPGA程序加载方式

    Vivado 设计过程中生成的 bit 流文件需要通过特定的配置引脚导入到 FPGA 中。专用配置引脚上的不同电压级别决定了不同的配置模式。可选的配置模式有:

    瓜大三哥
  • ES中文分词器之精确短语匹配(自定义分词器)

    YG

扫码关注云+社区

领取腾讯云代金券