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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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 zip文件解压类代码
2009/12/02 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php实现网站留言板功能
2015/11/04 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
div模拟滚动条效果示例代码
2013/10/16 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书