使用webpack dev server通过本地IP启动服务器后invalid host header的错误解决办法

最近在研究webpack,本来前阵子webpack dev server还配置的挺正常的…今天突然重新搭环境的时候跑不起来了…不知道是不是版本原因导致的,反正现象是

webpackDevServer服务器启动正常,进行localhost:9000访问正常,但是用本地的ip例如我IP是192.168.1.100,于是在浏览器中访问192.168.1.100:9000则出现了invalid host header.

那么解决这个问题也是差了不少资料.如果你存在此问题可以尝试一下方法:

首先说明环境 webpack 2.6.1 + webpackDevServer 2.5.0

我本来的webpack.config.js文件内的webpackDevServer配置如下

devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    host: '0.0.0.0'
}

有人说要加一个

disableHostCheck: true

不过不知道这里是没有效果的

又查到说加了一个public参数,试了下就好了.所以就分享下.完整的效果是

devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    host: '0.0.0.0',
    disableHostCheck: true,
    public: '192.168.1.107'
}

PS:后来发现用disableHostCheck: true其实也行了,大概是缓存原因没有及时看到效果,不论怎么样…出现这种问题的朋友都可以试试咯~

参考

–host 0.0.0.0 Not working
I am getting an “Invalid Host header” message, when running my React app in a Webpack dev server on Cloud9.io
webpack-dev-server2.4.3版本的官方说明
webpack-dev-server disableHostCheck导致 invalid host header

Windows 10 64bit 下nodejs报错”MSBUILD : error MSB4132:…”解决

在win10 64位系统下,关于nodejs下通过npm install环境部署项目时出现报错’MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0”。’的解决办法

最近用自己笔记本办公配置windows 10下的开发环境(当然不排除WIN7下也有可能存在此问题),其中在进行一个项目的NPM INSTALL的时候一直出错…错误如下

关于NPM INSTALL相关错误信息
关于NPM INSTALL相关错误信息

找了很多解决办法…都无效.十分沮丧…前几天在win7 64bit下也是折腾了好几天.依赖关系实在是复杂- –

我先来说说这个问题怎么处理吧.经过大量查找研究得出的结论…用了一行这个命令:

npm config set msvs_version 2012 --global

参考资料:

MSBUILD : error MSB4132: The tools version “2.0” is unrecognized. Available tools versions are “4.0”.(用户shawmanz32na的回答,也包含其他可能存在的问题的解决集合链接)

Cannot install node modules that require compilation on Windows 7 x64/VS2012

当然也有人说修改注册表的方法,虽然我也用了不过没什么效果.我现在想还原注册表都不行了- -没备份.这里如果大家在试了以上方法仍然无效的情况下可以试试修改注册表的这块的版本号,但是个人不建议,或者提前做好注册表备份.这里不详细说明注册表方法,给个链接大家参考MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0”。

当然可能还存在其他的问题比如缺少VC++ 20XX运行库什么的

可以试试这个软件下载站的工具常用运行库合集(VB+VC运行库)

以上链接怀疑包含广告,暂时删去,还是用一下3DM的运行库吧http://dl.3dmgame.com/201707/110601.html

 


更新2018.4.12

如果以上方案还是有问题, 比如我今天就出现这个情况了。。。然后又苦恼这个坑爹博主刚才那条命令搞了啥,想要还原,其实我就是改了一下全局的npm中微软编译时依赖库版本,文件路径在这

C:\Users\whidy\AppData\Roaming\npm\etc

你要是不爽就把这个里面的文件npmrc删掉就好了,然后再采取最后一个终极方案。前提你的确装了一些库,不过以下会再重新安装一下。方式如下:

  1. 管理员权限的Windows PowerShell或CMD,执行npm install --global --production windows-build-tools
  2. 如果没有手动安装过Python则在上面一步自动安装Python后可能需要手动配置一下环境变量,Windows PowerShell或CMD中执行npm config set python python2.7
  3. 重新设置该项目的msvs版本,同样Windows PowerShell或CMD中执行npm config set msvs_version 2015,或者全局的话加个-g

再在项目中运行npm install,可能会出现很多警告,但是这些可以忽略的。

我不信还会出问题- -!

如果提示这些错误信息

MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装 .NET Framework 2.0 SDK;2) 安装 Microso
ft Visual Studio 200
5;或 3) 如果将该组件安装到了其他位置,请将其位置添加到系统路径中。 [D:\Webs\infinite-scroll-vuejs\node_modules\node-sass\build\binding.sln]

也可以按上面的方法尝试解决:

参考:node-gyp

附上MSVSVersion版本说明:

versions = {
  '2017': VisualStudioVersion(
    '2017',
    'Visual Studio 2017',
    (solution_version = '12.00'),
    (project_version = '15.0'),
    (flat_sln = False),
    (uses_vcxproj = True),
    (path = path),
    (sdk_based = sdk_based),
    (default_toolset = 'v141'),
    (compatible_sdks = ['v8.1', 'v10.0'])
  ),
  '2015': VisualStudioVersion(
    '2015',
    'Visual Studio 2015',
    (solution_version = '12.00'),
    (project_version = '14.0'),
    (flat_sln = False),
    (uses_vcxproj = True),
    (path = path),
    (sdk_based = sdk_based),
    (default_toolset = 'v140')
  ),
  '2013': VisualStudioVersion(
    '2013',
    'Visual Studio 2013',
    (solution_version = '13.00'),
    (project_version = '12.0'),
    (flat_sln = False),
    (uses_vcxproj = True),
    (path = path),
    (sdk_based = sdk_based),
    (default_toolset = 'v120')
  ),
  '2013e': VisualStudioVersion(
    '2013e',
    'Visual Studio 2013',
    (solution_version = '13.00'),
    (project_version = '12.0'),
    (flat_sln = True),
    (uses_vcxproj = True),
    (path = path),
    (sdk_based = sdk_based),
    (default_toolset = 'v120')
  ),
  '2012': VisualStudioVersion(
    '2012',
    'Visual Studio 2012',
    (solution_version = '12.00'),
    (project_version = '4.0'),
    (flat_sln = False),
    (uses_vcxproj = True),
    (path = path),
    (sdk_based = sdk_based),
    (default_toolset = 'v110')
  ),
  '2012e': VisualStudioVersion(
    '2012e',
    'Visual Studio 2012',
    (solution_version = '12.00'),
    (project_version = '4.0'),
    (flat_sln = True),
    (uses_vcxproj = True),
    (path = path),
    (sdk_based = sdk_based),
    (default_toolset = 'v110')
  ),
  '2010': VisualStudioVersion(
    '2010',
    'Visual Studio 2010',
    (solution_version = '11.00'),
    (project_version = '4.0'),
    (flat_sln = False),
    (uses_vcxproj = True),
    (path = path),
    (sdk_based = sdk_based)
  ),
  '2010e': VisualStudioVersion(
    '2010e',
    'Visual C++ Express 2010',
    (solution_version = '11.00'),
    (project_version = '4.0'),
    (flat_sln = True),
    (uses_vcxproj = True),
    (path = path),
    (sdk_based = sdk_based)
  ),
  '2008': VisualStudioVersion(
    '2008',
    'Visual Studio 2008',
    (solution_version = '10.00'),
    (project_version = '9.00'),
    (flat_sln = False),
    (uses_vcxproj = False),
    (path = path),
    (sdk_based = sdk_based)
  ),
  '2008e': VisualStudioVersion(
    '2008e',
    'Visual Studio 2008',
    (solution_version = '10.00'),
    (project_version = '9.00'),
    (flat_sln = True),
    (uses_vcxproj = False),
    (path = path),
    (sdk_based = sdk_based)
  ),
  '2005': VisualStudioVersion(
    '2005',
    'Visual Studio 2005',
    (solution_version = '9.00'),
    (project_version = '8.00'),
    (flat_sln = False),
    (uses_vcxproj = False),
    (path = path),
    (sdk_based = sdk_based)
  ),
  '2005e': VisualStudioVersion(
    '2005e',
    'Visual Studio 2005',
    (solution_version = '9.00'),
    (project_version = '8.00'),
    (flat_sln = True),
    (uses_vcxproj = False),
    (path = path),
    (sdk_based = sdk_based)
  )
};

参考:https://chromium.googlesource.com/external/gyp/+/master/pylib/gyp/MSVSVersion.py#259

jQuery Trickshots来自Tutorialzine的一本关于100个高级jQuery技术书籍分享

最近看到一篇写的不错的文章,来自jQuery中的100个技巧.首先感谢作者辛苦翻译.

不过我也想找原文…于是也是辛苦了很久才找到了这篇伟大的文章出处,更难能可贵的是该站竟然有多个版本的电子书,开放免费.当然是需要注册的,我注册了一个,下载了与大家分享.

这个压缩包包含了全部html,js实例源码,还有多个版本的电子版(pdf,mobi,epub),满足了用电脑,手机或者kindle的用户简直太棒了!!!迫不及待放出分享连接了.以下是分享地址

百度网盘: 英文原版下载页面(以及鸟语版,不懂鸟语的不要下)

如果不能下载了请与发邮件

最后再次感谢伟大的

作者:Tutorialzine

来源:http://tutorialzine.com/books/jquery-trickshots/

介绍:

In this book, you will find 100 advanced jQuery techniques that we have developed over the years as JavaScript programmers and authors for Tutorialzine, presented as easy to understand tips.

关于sublime text 3(3103)版本Ctrl+Alt+P无法正常使用解决办法

关于sublime text 3(3103)版本Ctrl+Alt+P无法正常使用,自定义快捷键的设置command实际上就是prompt_select_workspace,解决了此问题

过完年回来上班的第一天,打开sublime text 3,提示有更新(Sublime Text 3 Build 3103),没有多想就点下载更新了…更新完后,发现问题严重了,一方面是之前朋友买的key失效了,看到非注册的几个单词在窗口顶部就不自在了.当然这个不是本文重点,至于怎么解决这个问题,我相信不会难倒机智的大家.

而另一方面是很多之前的设置也没了.比如自定义快捷键.我有安装SideBarEnhancements这个插件,设置的F12快速预览也没了,只好找回旧版存档重新设置,其实这个问题也不大.
最糟糕的是,之前习惯用的快速切换项目的Ctrl+Alt+P不能用了,这个是旧版默认设置好的.然后到处找快捷键怎么设置的,我很傻,其实后来发现这个问题很好解决.我却绕了个大弯.

首先,百度肯定是搜不到的.然后去用谷歌找.谷歌是万能的,找到如下内容:

{ "keys": ["ctrl+alt+p"], "command": "prompt_select_workspace" }

这下添加到自定义keymap,问题解决.参考:Quick Switch Project shortcut doesn’t work anymore(当然,他好像说3098版本就去掉了,我并未注意到可能我一直在使用更旧的版本.而changelog里面似乎也没看到3098)

当然这里还要提一点的是,如果一切设置好了发现还是不能用,那多半是快捷键冲突所致,比如输入法的全局快捷键等等,这里推荐一个虽然有点老,但是还不错的工具Windows Hotkey Explorer,大家自行安装后,可以查看系统全局被占用的快捷键,然后对应的关闭调整一下就好了.

windowsHotkeyExplorer软件界面
windowsHotkeyExplorer软件界面

总结下来我的自定义快捷键是这样的.

[
    { "keys": ["f12"],
        "command": "side_bar_open_in_browser" ,
        "args":{"paths":[], "type":"testing", "browser":""}
    },
    { "keys": ["alt+f12"],
        "command": "side_bar_open_in_browser",
        "args":{"paths":[], "type":"production", "browser":""}
    },
    {
        "keys": ["ctrl+t"],
        "command": "side_bar_new_file2"
    },
    {
        "keys": ["ctrl+alt+p"],
        "command": "prompt_select_workspace"
    }
]

最后来说说为啥我笨死了.其实关于这个command,我找不到的话,我直接找旧版本的sublime text的default keymap查一下就好了嘛…笨笨笨………..还费了老大功夫.其他朋友有遇到类似问题也可举一反三,自行配置一个好用的sublime text咯~~~~

工具虽好,务必不要再WIN10下使用该软件,会发生十分可怕的事情!(2017年8月25日 更新)

SublimeText3的css文件引用图片转base64快速方法

如果在SublimeText3的css文件引用图片里将图片快速转换为base64(Data URL)的方法,以及利用chrome开发者工具获取图片的Data Url的方法

在你做的css文件中,起初背景图都是直接引用目录的切好的图片.如下:

.icons {background-image:url(../images/icon.png);}

那么在做移动端页面的时候,有时我们需要将小图直接转换成base64格式,一般只能借助第三方工具.
这里其实用sublime text 3 的快捷键ctrl+’可以直接快速转换.
当然页面的图片建议是压缩(例如tinypng工具)后的,要不然转换出的字符将会很长.
如果能确定页面的图片都可以直接转换,你可以直接选择 url( 然后快捷键 alt+f3 ,接着按 ctrl+’ ,这样一来css的图片就全部转换好了.

另外还有一种通过chrome快速获取网页上图片的Data Url方法.如图

chrome_ImageToDataUrl
chrome_ImageToDataUrl