Vue3-修改端口号

最新推荐文章于 2025-03-12 16:20:46 发布

怕是个神仙啊

最新推荐文章于 2025-03-12 16:20:46 发布

阅读量1.1w

点赞数 5

文章标签： vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/Dreamlxx/article/details/123135075

版权

本文详细介绍了在Vue项目中更改默认启动端口的五种方法，包括通过图形界面、修改package.json、运行时追加端口号、创建vue.config.js文件以及直接编辑serve.js文件。方法间的优先级也进行了说明，帮助开发者灵活调整项目端口，避免冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在图形界面中更改参数

在 package.json 文件中修改 scripts

  "scripts": {
    "serve": "vue-cli-service serve --port 80",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

在运行项目的时候追加端口号

npm run serve -- --port 80

在根目录下新建一个vue.config.js文件（和package.json同一目录），内容如下

module.exports = {
    devServer:{
        port:80, // 启动端口号
        open:true  // 启动后是否自动打开网页
    }
}

端口文件存放目录为：node_modules/@vue/cli-service/lib/commands/serve.js

const defaults = {
  host: '0.0.0.0',
  port: 80,
  https: false
}

优先级：方法一>方法二=方法三>方法四>方法五

如果方法二和方法三同时使用，且端口号设置不同，就会报错