vue学习--vue项目端口不固定,无法指定问题
写于20190819
前面是自己解决的思路,后面是解决方法以及需要记住的一些更改
package.json
之前只知道vue项目是基于node.js,对node.js了解不是很深入,项目的开始文件是package.json。文件中主要观察如下代码:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
可以知道dev的位置在bulid/ webpack.dev.conf.js
webpack.dev.conf.js
问题出在如下代码,这个函数本意是将basePort设置为特定端口(默认是8080),之后选取8080端口,如果端口被占用则往后取……但是经实验发现,在这里它会直接随机取basePort到highestPort中一个端口,每次都不固定,即使8080端口没有被占用。
解决方法
网上查到事情是爆发在这两天内的,是由于portfinder更新引起的错误,在https://github.com/vuejs/vue-cli/issues/4452中提供了解决方法,将portfinder的版本回退:
npm install portfinder@1.0.21
然而这个对我的项目无效,直接在node.js下运行portfinder是正常的,然而在vue项目下还是这个问题,我也不想深究原因。鉴于我只是写这个项目玩玩,我要做一个不太明智的更改,如果以后需要做一些正式的项目,希望该模块或者vue已经更改完毕,以及希望以后做这个项目遇到错误能想到这个更改
我的解决方法是在webpack.dev.conf.js中添加一句,无视端口占用问题,将port固定下来
module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port portfinder.getPort((err, port) => { port = process.env.PORT || config.dev.port//添加这一句 if (err) { reject(err) } else { // publish the new Port, necessary for e2e tests process.env.PORT = port // add port to devServer config devWebpackConfig.devServer.port = port // Add FriendlyErrorsPlugin devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], }, onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })) resolve(devWebpackConfig) } }) })
vue学习--vue项目端口不固定,无法指定问题的更多相关文章
- Vue学习之项目部分代码(十八)
1.mian.js: // 入口文件 import Vue from "vue"; // 1.1导入路由 import VueRouter from "vue-route ...
- vue学习:vue+webpack的快速使用指南(新手向)
一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- VUE学习——vue的内部指令学习(趁自己没忘,学习记录一下)
1.v-if&v-else&v-show v-if用来判断是否加载html的DOM,v-if和v-else一般是一起用的. v-show相当于display,DOM已经加载出来了,这个 ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- 三 vue学习三 从读懂一个Vue项目开始
源码地址: https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建
一 使用环境: windows 7 64位操作系统 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载 https: ...
随机推荐
- 怎样重启ssh服务
尝试下面两个命令: service sshd restart systemctl restart sshd.service
- 天梯赛 L2-023. 图着色问题
题解:用dfs遍历图的每条边就好,这里注意要求颜色的个数为k #include <cstdio> #include <iostream> #include <cstrin ...
- Effective Java 读书笔记(五):Lambda和Stream
1 Lamdba优于匿名内部类 (1)DEMO1 匿名内部类:过时 Collections.sort(words, new Comparator<String>() { public in ...
- vue+iview 通过a标签实现文件下载
vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...
- el-table——可编辑、拖拽排序与校验的formTableDrag
背景: 1.利用form进行校验输入: 2.利用sortable操作Dom替换表格数据顺序: 3.利用lodash实现数据深拷贝与参数替换等 一:最外层的数组校验 <template> & ...
- VSCode Git 没有活动的源代码控制提供程序
主要原因:我以前安装的Git只允许在Git-Bash中运行,需要重新安装Git,选择允许三方软件的那个选项,然后安装Git插件,修改git.path即可. 以下是解决过程中的尝试,记录如下,实际上只需 ...
- FPGA学习笔记之按键控制
参考: [黑金原创教程][FPGA那些事儿-驱动篇I ]实验二:按键模块① - 消抖 源码如下: key_funcmod.v module key_funcmod(clk, rst, key, led ...
- Linux命令——procinfo
简介 proc文件系统是一个虚拟文件系统,包含有关进程和系统信息的文件. proc 文件系统开机时自动挂载并映射到/proc目录.许多程序从/proc目录中检索信息,对其进行处理并使其易于用于各种目的 ...
- 【ansible】密钥免密登陆使用重点
Ansible 密钥免密登陆使用重点 1.配置/etc/ansible/hosts 2.配置公钥以及秘钥 authorized_keys 放置公钥文件 .ssh 放置密钥文件 密钥文件名称必须为 id ...
- P1351 联合权值[鬼畜解法]
题目描述 无向连通图 G 有 n 个点,n−1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 Wi,每条边的长度均为 1.图上两点 (u,v) 的距离定义为 u 点到 v 点的最短距离 ...