Vue开发环境中修改端口号的实现方法


Posted in Javascript onAugust 15, 2019

Vue开发环境中修改端口号

Vue开发环境中修改端口号的实现方法

如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口。

1.Vue 2.x

config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可。
module.exports = {
  dev: {
    env: require('./dev.env'),
    port: 8080,  // 端口号
    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,
   }
};

2.Vue 3.x

Vue 3.x中修改端口号则需要在项目根目录下创建一个vue.config.js,内容如下。
module.exports = {
  devServer: {
    port: 8080,   // 端口号
  }
};

3.起因

Access to XMLHttpRequest at 'http://localhost:8080/sockjs-node/info?t=1565711501046' from origin 'http://192.168.0.104:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

localhost:8080/sockjs-node/info?t=1565711501046:1 Failed to load resource: net::ERR_FAILED

Vue开发环境中修改端口号的实现方法

今天我调试练手的项目时发现报了这么个错误,当时百度了好久不得解决要领,后来想起来自己开了两个项目,一个是Vue2.x,另一个是Vue3.x,看来一下两个的端口号都是8080,冲突了。至于为什么同一个端口号能运行两个项目,是因为Vue3.0运行时会产生两个项目地址(如下图),我点了后一个......

Vue开发环境中修改端口号的实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 #Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 #Javascript
微信小程序之数据绑定原理解析
Aug 14 #Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 #Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 #Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 #Javascript
vue filter 完美时间日期格式的代码
Aug 14 #Javascript
You might like
php实现的MySQL通用查询程序
2007/03/11 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
Javascript实现的分页函数
2007/02/07 Javascript
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python ZipFile模块详解
2013/11/01 Python
Python urlopen()函数 示例分享
2014/06/12 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
暑期实践思想汇报
2014/01/06 职场文书
个人租房协议书范本
2014/09/30 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
毕业论文致谢信
2015/05/14 职场文书
《我是什么》教学反思
2016/02/16 职场文书