木灵鱼儿
阅读:2712
关于 vue cli 的Network unavailable的问题分析以及修复方式
发现公司的项目,不管是vue2还是vue3,不管是新创建的还是旧项目,启动后Network永远是unavailable;就很离谱,导致每次想要局域网测试,只能手动在devServer
中配置public
属性,设置一个固定的本地ip地址。
但是,你的ip地址并不是别人的ip地址,那么就会导致如果不小心上传了vue.config.js
;那么同事一拉,哦吼,不懂得就说,哎呀,我的项目怎么启动不了了。
这就很蛋疼了,所以我分析了一下这个问题的原因。
首先,我的电脑的环境是没有问题的,网卡也是没有问题的,vue cli早就支持多个网卡了,所以多网卡问题就可以忽略。
其实主要原因是因为一个不合法的ipv4地址。
目前公司的ip地址是:
192.16.3.199
我的电脑大概是这么一个格式的ip地址,和平常的192.168.3.199
这种完全不一样,所以产生了这个问题。
如果不相信的话,可以给电脑设置一个固定ip你再启动,你会发现Network显示就正常了。
问题分析
很明显是vue cli里面对于ip地址获取的方式兼容上有一些问题,在vue cli的issues里面找到一个回复,他说在vue cli中有一个prepareURLs.js
文件,里面有一个用于匹配ip的正则:
/^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]168[.]/
很明显,用这段正则无法正确匹配到192.16.3.199
的ip地址。
那么,这个文件在哪?
它存在于你项目的node_modules目录中,路径:/node_modules/@vue/cli-service/lib/util/prepareURLs.js
我们可以在43行(不确定以后改没改);找到这个正则;
修复的方式
第一种
可以直接将prepareURLs.js
文件中的正则修改为:
/^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]16[8]?[.]/
其实就是对后面的8做一个懒惰模式,有没有都可以。
保存后重启项目,Network恢复。
但是这种方式,很容易在重新安装依赖后文件被重新覆盖,问题又会出现,所以,这种方式仅适用于临时测试。
第二种
第二种方式,我们只能退而求其次,设置一个固定的public
属性了,只不过我们可以通过node的模块动态获取本机ip地址。
module.exports = {
devServer: {
public: require("os").networkInterfaces()[Object.keys(require("os").networkInterfaces())[0]][1].address + ":9999"
}
}
端口的话只能固定了,或者采用变量的形式,这个端口在其他地方保存,这边引入使用。
修复后
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue cli3-cli4 打包后项目在二级路径的方法
默认情况vue的build打包,都是基于根路径来进行的,但是,如果我们将打包的文件放置再二级目录,就会导致文件无法加载,页面空白。原因有两个:路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时,我们常常会看到一个base选项,内容如下:const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释:类型: string 默认值: "/"应用的基路径。例如,如果整个单页应用服务在 /app/ 下...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vue cli异步路由加载原理
webpack会解析路由文件的引入,就算你是一个setTimeout输出的路由配置文件,或者if else判断的路由配置文件,他都会将你明文书写的路由vue文件打包。为什么?其原理未知,估计并不是解析代码,而且代码关键字的抓取。如果你是一个api返回的路由配置,webpack的无法准确感知到路由文件的是否被引入,所以它的办法是全部都打包,src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js这种格式的文件。其中包裹components目录下的组件,哪怕你的这个组件已经被某个路由页明确引入了,这个路由除了会被打包到这个路由页,还会生成单独的chunk...
docker 网络
在linux中输入 ip addr可以看到有三个网络配置:lo 127.0.0.1 # 本机回环地址eth0 172.17.90.138 # 阿里云的私有IPdocker0 172.18.0.1 # dockerdocker会自行创建一个类似路由器一样的网络处理层,所有启动的容器都会自动分配一个基于172.18.0.1的ip地址,也正因为如此,我们容器之间是可以相互ping通的,因为都在同一个网关下。但也仅限于利用ip地址进行通信。原理每一个安装了Docker的linux主机都有一个docker0的虚拟网卡。这是个桥接网卡,使用了veth-pair技术! 每启动一个容器,linux主...

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值
在默认初始化好的vue cli项目,public目录下的index.html文件,他的title使用的是一种ejs语法:<title><%= htmlWebpackPlugin.options.title %></title>接收的是htmlWebpackPlugin对象上,options的title。一般情况,省事一点,直接把这个title给改成静态就完事了!<title>静态标题</title>但是,好像少了点什么,能不能不改动这个就能改标题呢?当然是可以的,我们需要配置下vue.config.jsvue.config.js...
vue cli4 全局scss变量技巧
今天啃了下官方文档,加上之前也配置到webpack的,有一些经验,我觉得官方可能有对应的方式,毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了,都不用安装啥插件。于是乎,果然,官方有,但是文档很蛋疼,你能看懂引入单个全局,没有多个全局的示例,索性自己写个笔记了。vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: ` @import "~@/base/assets/scss/glob...
关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题
莫名其妙就提示css冲突和顺序问题,而且组件里面的样式和class类名完全不相干,不知道怎么就给你冲突了。顺序都有点莫名其妙,这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然,反正就是大量的警告,18年就有人提出这个问题了,唉,头疼issues目前普遍的解决办法就是忽略这个警告,因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹,插入以下代码:module.exports = { css: { extract: { ignoreOrder: true }, }, }保存,然后重新打包,不会再提示 冲突和顺序问题了
![关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题](https://mulingyuer-1253375624.cos.ap-guangzhou.myqcloud.com/%E5%9B%BE%E7%89%87%E7%A9%BA%E9%97%B4/%E5%85%B3%E4%BA%8Evue%20cli%E6%89%93%E5%8C%85%E6%8F%90%E7%A4%BA%20chunk%20chunk-ec595700%20%5Bmini-css-extract-plugin%5D%20css%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%92%8C%E5%86%B2%E7%AA%81%E8%AD%A6%E5%91%8A%E7%9A%84%E9%97%AE%E9%A2%9801.jpg!Anti_theft)
vue cli 指定打包输出的路径
因为有这个需求,所以分享出来,省的百度找到的都是一堆垃圾文章。vue.config.js配置一个属性即可module.exports = { //指定输出路径 outputDir: 'build/dist' }outputDir配置输出的路径,默认是dist,我打包后文件输出到当前目录(vue.config.js相对)下的build目录下的dist文件夹
vue 路由跳转使用新建页面打开
今天遇到这么一个需求,官网的个别页面需要新建页面打开,但是这个页面我是配置的路由。一直以来,我以为路由的跳转只能就是在当前页面进行,特别是我跳转路由使用的都是路由name属性。接到这个请求我有点懵逼了,哈哈。。解决方法router-link元素默认生成的是一个a元素,仔细查看你会发现a元素的href是带有路径链接的,哪怕你跳转的:to="{name:xxx}"使用的是路由name。它最终生成的a元素,href依旧是路由的path,所以,既然他能生成路径,那么我们只需要给他加上a元素的attr属性target即可。<router-link :to="{n...
elment ui el-backtop使用教程
饿了么ui的返回顶部,官方的文档非常不上心,写的那个无法使用,因为默认那个示例里面,他用了target属性,然而实际上,如果你没啥定制化的滚动条,而是body的滚动条,那么target就不需要设置。<!-- 返回顶部 --> <el-backtop> <i class="el-icon-arrow-up"></i> </el-backtop>这样就行了,效果ok,不会不显示,滚动效果也是有的。里面的i是我自定义图标,这个看下文档就明白了。