vue中的端口号如何改修

 更新时间:2026年01月01日 17:15:25   作者:大宁宁吖  
文章介绍了两种在Vue项目中修改端口号的方法:一种是在`webpack.config.js`或`vue.config.js`中配置`devServer`,另一种是修改`package.json`中的`scripts`属性,在`serve`或`dev`命令后加上`--port`指定端口号

vue端口号改修

方法一

在根目录webpack.config.js或vue.config.js中配置devServer

module.exports = {
  devServer: {
    host: 'localhost',
    port: 9000, // 端口
  }
}

方法二

在package.json中的scripts进行配置

若项目是用cli3+版本创建则在serve的属性值后加上--port 9000,若是用cli2创建的项目则在dev的属性值后加上--port 9000。

如下:

"serve": "vue-cli-service serve --port 9000",

配置完重新运行项目即可

运行效果如下:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3如何在SCSS中使用v-bind

    Vue3如何在SCSS中使用v-bind

    这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue3使用MD5加密实战案例(清晰明了)

    Vue3使用MD5加密实战案例(清晰明了)

    MD5是一种信息摘要算法(对称加密),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值,用来确保信息传输完整一致性,这篇文章主要给大家介绍了关于Vue3使用MD5加密的相关资料,需要的朋友可以参考下
    2023-05-05
  • vue2中provide/inject的使用与响应式传值详解

    vue2中provide/inject的使用与响应式传值详解

    Vue中 Provide/Inject实现了跨组件的通信,下面这篇文章主要给大家介绍了关于vue2中provide/inject的使用与响应式传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue3前端调试技巧与开发完整指南

    Vue3前端调试技巧与开发完整指南

    对于一个前端小白来说,在vue项目开发过程中,当遇到应用逻辑出现错误,使用好调试工具更能准确定位到问题,这篇文章主要介绍了Vue3前端调试技巧与开发完整指南的相关资料,需要的朋友可以参考下
    2026-04-04
  • Uniapp的vue、nvue、uvue后缀名的区别及说明

    Uniapp的vue、nvue、uvue后缀名的区别及说明

    这篇文章主要介绍了Uniapp的vue、nvue、uvue后缀名的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-05-05
  • Element UI响应式布局问题的解决

    Element UI响应式布局问题的解决

    本文主要介绍了Element UI响应式布局问题的解决,提供了五种屏幕大小尺寸,xs、sm、md、lg 和 xl,并对这五种尺寸提供了两种解决方案,感兴趣的可以了解一下
    2025-08-08
  • vue实现鼠标经过显示悬浮框效果

    vue实现鼠标经过显示悬浮框效果

    这篇文章主要为大家详细介绍了vue实现鼠标经过显示悬浮框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vux-scroller实现移动端上拉加载功能过程解析

    vux-scroller实现移动端上拉加载功能过程解析

    这篇文章主要介绍了vux-scroller实现移动端上拉加载功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法
    2020-01-01
  • Vue2.0权限树组件实现代码

    Vue2.0权限树组件实现代码

    本文通过实例代码给大家介绍了Vue2.0权限树组件实现代码,需要的的朋友参考下吧
    2017-08-08

最新评论