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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue修改vue项目运行端口号的方法

    vue修改vue项目运行端口号的方法

    一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝卜是子元素,红萝卜是父元素,白萝卜蹲完不想让红萝卜蹲,怎么办? js是直接用阻止默认事件e.preventDefault(); ,vue虽然也有阻止默认事件@scroll.prevent,但是并没有效果啊,怎么办啊??有木有同学会啊??? 二.正文 记录下如何更改vue项目运行的端口号 使用webp

  • vue.js如何更改默认端口号8080为指定端口的方法

    本文介绍了vue.js如何更改默认端口号8080为指定端口,分享给大家,希望此文章对各位有所帮助. 执行npm run dev实际是在调用根目录下的package.json 打开package.json后可发现有这样一段代码 "scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "lint&q

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

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

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

    Vue开发环境中修改端口号 如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口. 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可. module.exports = { dev: { env: require('./dev.env'), port: 8080, // 端口号 assetsSubDirectory: 'static', assetsPublicPath: '/', pr

  • Android开发中遇到端口号占用问题解决方法

    Android开发中遇到端口号占用问题解决方法

    Android开发的时候经常遇到端口号被占用的问题,经常使程序无法运行,很烦人.我总结了一个很好的方法,非常实用.方法如下: (1):方法1: 第一步:1:netstat -ano | findstr "5037" 第二步:2:TASKLIST | findstr "9292" (2):方法2: 首先进入目录下:E: 复制代码 代码如下: adb kill-server adb start-server 如下图所示:

  • redis中修改配置文件中的端口号 密码方法

    windows中 1.找到redis文件的位置, 编辑redis.windows.conf, 将端口号改成8888 2.打开cmd, 重启启动(带配置文件的启动) 3.连接测试 liunx下 1.找到redis的安装位置,例如我的是 /usr/local/redis, 找到redis.conf 2. 查找port 修改端口号, 查找requirepass修改密码(密码修改把前面注释打开) 3.修改端口,密码 4.重启 /usr/local/redis/bin/redis-server /usr/

  • Vue开发环境跨域访问问题

    Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target:'http://192.168.1.99:8080/', changeOrigin:true, pathRewrite:{ '^/api':'' } }

  • Vue 去除路径中的＃号

    Vue 去除路径中的＃号

    在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋. 众所周知,vue-router有两种模式,hash模式和history模式. 带#的则是hash模式. 将router中的mode设置为history就可以了 接下来有个问题,界面一刷新,就变404了!!!! 网上搜了下,需要对后端环境进行一个配置. 这里只列举nginx的配置,其他的配置点击这里去官网看 先配置config/index.js 修改assetsPublicPath为根目录 module.exports = { bui

  • webpack4手动搭建Vue开发环境实现todoList项目的方法

    前言 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!! 基于个人的时间精力问题,把本项目教程分为两部分: webpack4手动搭建Vue开发环境 (本篇文章) 手动搭建Vue项目文件夹实现t

  • 详解如何从零开始搭建Express+Vue开发环境

    详解如何从零开始搭建Express+Vue开发环境

    准备工作 1. 为前端选择合适的预处理工具和资源管理工具 预处理工具又分为 js 预处理工具和 css 预处理工具.Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制,所有 js 代码文件在被 html 页面引入后将共用同一个命名空间.所以才出现了各种"标准"尝试解决这个问题,但他们都不是原生的,需要额外的工具对代码进行特殊处理.虽然 ES6 终于引入了模块机制,但以现在的浏览器支持程度,还不足以"毫无顾虑地随拿随用".所以 js 预处理工具最主要

  • 解决xmapp中Apache端口号占用问题(Apache不能正常启动)

    小伙伴们安装xmapp后发现Apache不能正常开启,下面给出了不同情况的解决办法,可以分为以下几种情况分析问题: (一)是否在本次安装之前已经安装过xmapp(没有请跳过) 在本次安装之前已经安装过xmapp,虽然卸载了,但是会有卸载不干净的情况,卸载时最好使用程序本身自带的卸载程序(即运行uninstall.exe进行卸载),最好不要使用控制面板中的卸载功能,卸载过后一定不要忘记去检查注册表中是否已经删除,注册表查看方式: 1.按键盘上的 win键+R键,弹出"运行"窗口. 2.输

  • C#动态加载组件后如何在开发环境中调试详解

    C#动态加载组件后如何在开发环境中调试详解

    动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定目录下的dll一次性用Assembly.Load加载进来.只要把指定目录变成从网络加载,或者加载指定目录前先检查网络上的是否有新版本.这就简单做成个最简单版本的热更新. 多数网上的资料就是然后就没有然后了.很多人就发现产品是通过动态加载组件了.但开发人员根本无法调试啊.不能调试就意味着开发难度大啊.

随机推荐