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 网页水印(非图片水印)实现代码
Mar 01 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
vue模式history下在iis中配置流程
Apr 17 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
nodejs动态创建二维码的方法
2017/08/12 NodeJs
浅析JS中回调函数及用法
2018/07/25 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python中的Numpy入门教程
2014/04/26 Python
Python读取properties配置文件操作示例
2018/03/29 Python
在python中bool函数的取值方法
2018/11/01 Python
Python递归函数实例讲解
2019/02/27 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
异步传递消息系统的作用
2016/05/01 面试题
学生会部长竞聘书
2014/03/31 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
比赛主持人开场白
2015/05/29 职场文书
垂直极限观后感
2015/06/08 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技