vue中的端口号如何改修

1. 通过命令行参数修改（推荐）

开发环境

# 修改为指定端口
npm run serve -- --port 3000

# 或使用简写
npm run serve -- -p 3000

# 或直接修改package.json脚本
# 在package.json中添加：
"scripts": {
  "serve:3000": "vue-cli-service serve --port 3000"
}

创建多个端口配置

"scripts": {
  "serve": "vue-cli-service serve --port 8080",
  "serve:3000": "vue-cli-service serve --port 3000",
  "serve:9000": "vue-cli-service serve --port 9000"
}

2. 修改配置文件

在 vue.config.js 中配置

// vue.config.js
module.exports = {
  devServer: {
    port: 3000,  // 修改端口号
    open: true,   // 自动打开浏览器
    host: 'localhost'  // 指定主机
  }
}

完整配置示例

module.exports = {
  devServer: {
    port: 3000,
    host: '0.0.0.0',  // 允许外部访问
    open: true,
    https: false,     // 是否启用HTTPS
    hot: true,        // 热更新
    proxy: {          // 代理配置
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
}

3. 使用环境变量

创建 .env 文件：

# .env.development
PORT=3000
HOST=0.0.0.0

然后在 vue.config.js 中读取：

module.exports = {
  devServer: {
    port: process.env.PORT || 8080,
    host: process.env.HOST || 'localhost'
  }
}

4. 端口被占用时的处理

如果端口被占用，Vue CLI会自动尝试下一个端口，你也可以：

// vue.config.js
module.exports = {
  devServer: {
    port: 3000,
    // 端口被占用时是否自动尝试其他端口
    strictPort: false,  // 默认false，会自动尝试其他端口
  }
}

5. 创建代理多个后端API

module.exports = {
  devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true
      },
      '/auth': {
        target: 'http://localhost:8082',
        changeOrigin: true
      }
    }
  }
}

6. 构建后的静态服务器配置

对于生产构建的文件，可以使用不同服务器启动：

使用 serve 包：

npm install -g serve
serve -s dist -l 3000

使用 http-server：

npm install -g http-server
http-server dist -p 3000

使用 Express：

// server.js
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

注意事项：

快速测试：

# 临时修改端口
npm run serve -- --port 8888

# 查看帮助文档
npm run serve -- --help

推荐使用 vue.config.js 配置文件的方式，这样可以保持一致的开发环境配置。