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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
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 addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP实现递归无限级分类
2015/10/22 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP微商城开源代码实例
2019/03/27 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
Python 中 Meta Classes详解
2016/02/13 Python
使用python实现ANN
2017/12/20 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
成立公司计划书
2014/05/07 职场文书
交通文明倡议书
2014/05/16 职场文书
作风转变心得体会
2014/09/02 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
烈士陵园观后感
2015/06/08 职场文书