Vue.js更改调试地址端口号的实例


Posted in Javascript onSeptember 19, 2018

Vue项目一般使用自带的脚手架工具vue-cli和webpack打包方式进行项目构建运行。开发中,我们在控制台输入命令行npm run dev部署项目后,默认开启的页面调试地址是8080端口。但是有时候我们在进行多个项目开发需要同时部署多个vue项目,甚至有的还需要启动后台项目,这时就需要修改Vue项目的启动端口(不然会报端口被占用的错误,一个端口号只能一个进程占用)。

本文像大家讲解如何找到Vue项目中端口的配置文件,并修改。

首先,我们打开项目根路径中webpack的配置文件package.json,找到如下代码:

"scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js",
 "lint": "eslint --ext .js,.vue src"
 }

start节点配置的是项目部署编译的入口文件,一般默认是build/dev-server.js,找到build目录下的该文件中下面代码:

var uri = 'http://localhost:' + port

uri就是我们项目部署的地址名称,port即是端口号,我们在这里把port改成新的端口号也可以。在实际开发中,不建议这样在代码中采用硬编码,而是通过统一的配置文件进行定义。

那么配置文件在哪呢,我们继续看dev-server.js文件中如下代码:

var webpackConfig = require('./webpack.dev.conf')

从这里可以看出,引入了一个新的文件webpack.dev.conf,继续点开后发现该本身并不负责具体字段的设置工作,只是引入其他的配置文件以便于统一管理,我们找到如下代码:

var config = require('../config')

注意这里的config是指文件件,我们打开其目录下的index.js,就是端口号的最终设置的地方:

dev: {
 env: require('./dev.env'),
 port: 8082,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false
 }

将port改成新值即可,如我这里的8082,重新部署项目,端口号修改成功。

以上这篇Vue.js更改调试地址端口号的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
jquery队列函数用法实例
Dec 16 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
May 12 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 #Javascript
vue中的计算属性实例详解
Sep 19 #Javascript
Vue axios设置访问基础路径方法
Sep 19 #Javascript
json前后端数据交互相关代码
Sep 19 #Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 #Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 #Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 #Javascript
You might like
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
python中文乱码的解决方法
2013/11/04 Python
Python类定义和类继承详解
2015/05/08 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python for 循环获取index索引的方法
2019/02/01 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
机关财务管理制度
2014/01/17 职场文书
企业员工培训感言
2014/02/26 职场文书
营销与策划专业求职信
2014/06/20 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS