Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装

今天新建了 vue项目,npm run dev 之后感觉很奇怪,浏览器没自动打开页面,而且用IP地址替换“localhost”之后,竟然报错了!

Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装_第1张图片
拒绝连接请求

还以为网络坏了,赶紧检查是不是网络设置什么代理。

折腾一圈之后,发现是因为 vue-cli 的 webpack 模板在11月12日 的1.2.0版本引入了wepack-dev-server,而vue-cli没次创建项目,默认会创建最新的 webpack模板,所以应该从11月12日之后,通过vue-cli创建的webpack模板都有这个问题。

Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装_第2张图片
官方在1.2.0引入了wepack dev server

对比了package.json代码,和以前的代码已经不一样了

Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装_第3张图片
package对比

通过网上找的方法,在config/index.js中“host” 配置为“0.0.0.0”解决了。不能自动打开浏览器的问题,配置"autoOpenBrowser"为true后也解决了。

Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装_第4张图片
替换localhost

但是又出事了,把网页地址发送到手机,怎么偿试都是Android 正常打开,而iOS 10为空白页(iOS 11也能正常打开)。

Vue v2.5.2对 iOS 10的兼容,官方没有说,也没有没有找到解决方法。那现在只能Vue降级了,至少前几个版本还是好用的。

选择了 webpack v1.1.2模板做降级,这个模板对应着Vue 2.4.2的版本。

Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装_第5张图片
指定webpack版本创建

一波三折,故事还没完,运行npm run dev 之后又报错了!

Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装_第6张图片
node不支持加载vue

又去看package.json,发现 vue-template-compiler 和 vue 的版本不一致。

Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装_第7张图片
保持vue版本与vue_template版本同步

单这么改还不行,因为还要去除 wepack-dev-server,以及 config/index.js 的代码也要还原。

把项目删了,重新 vue init webpack proj ,打开项目,修改 package.json 中 vue 版本号,再运行 npm installnpm run dev ,Done!

你可能感兴趣的:(Vue v2.5.2 IP 替换 localhost 后拒绝访问:Vue降级安装)