一段时间没有用vue，其脚手架已经更新到2.9.3，使用新的vue-cli构建项目，生成的目录和之前的不太一样，这里不细说，下面罗列笔者遇到的深坑：
vue-cli版本的升级
之前笔者使用的是2.8.1版本的vue-cli，按下vue init webpack project-name初始化项目的时候~ 各种报错，因为已经完成了升级~ 原谅笔者这里就不具体截报错的图了~~
最简单粗暴的方法是直接npm uninstall vue-cli -g 卸载后再重新输入npm install vue-cli -g
一切顺利的话也就升级好了~ 奈何笔者布吉岛什么时候手贱，修改了npm install -g全局安装时的默认目录~ 一般默认情况下是安装在"C:\Users\xxx(用户名)\AppData\Roaming\npm"，笔者应该是当年安装vue-cli的时候安装到了默认路径下，然后布吉岛什么时候修改了全局安装路径~ 导致卸载的时候卸载的是node安装目录下node_global/node_module里的vue-cli包~ 于是乎~ 第一次输入npm uninstall vue-cli -g 卸载~ 其实相当于什么也没发生，因为之前安装的vue-cli压根就不在这里，接着重新全局安装，便将新版本的vue-cli安装到了这个目录下，装是装好了，可是打开命令行，输入vue init webpack project-name的时候，使用的是之前安装到"C:\Users\xxx(用户名)\AppData\Roaming\npm"下的旧版本的vue-cli，于是开始各种报错各种不对了。。。。。。
- 填坑：将手贱修改的路径改回之前默认的去，命令如下：
npm config set prefix "C:\Users\xxx\AppData\Roaming\npm"
然后就卸载重装吧~
新版本vue-cli构建的项目无法通过局域网网址访问
新版本vue-cli构建的项目目录和配置跟之前的都有差异，最神奇的是之前的项目，运行npm run dev 手机连上wifi，用局域网可以愉快的访问，新版的却只能在电脑端输入localhost访问，也是呵呵了
- 填坑：修改
config/index.js，具体修改如下图：
image.png
将localhost改为0.0.0.0，顺带把那个自动打开浏览器的设置改为true，新版默认情况下不自动打开浏览器。。。。。
至于第三个红框，笔者上网查的资料是，有小伙伴说单单只是修改localhost的选项依旧不能远程访问，还需要将devtool选项修改为inline-source-map
笔者测试的结果是此项修不修改都可以手机访问，所以，读者视情况而定。
网友评论