前端三大框架脚手架如何配置运行的端口

关于脚手架生成的运行端口配置

React

官方脚手架create-react-app：

• 修改生成后的package.json中的scripts

  "scripts": {
    "start": "set PORT=8899 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

React-SSR

create-next-app

• 进入到项目根目录下的package.json
• 进去之后主要看script中的命令
• 修改dev和start端口都是在其后面加-p 端口即可

{
  "scripts": {
    "dev": "next dev -p 8999",
    "build": "next build",
    "start": "next start -p 8999"
  },
}

Vue

官方脚手架：

• 修改生成后的package.json中的scripts
• 简单粗暴的方法就是直接在serve里加想要指定的端口

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

• 配置vue.config.json

  module.exports = {
      // webpack-dev-server 相关配置
      devServer: {
          host: '127.0.0.1',
          port: 9999,
      },
  }
  

Vue-SSR

create-nuxt-app

• 进入到项目根目录下的package.json
• 多加一个config的配置即可

"config": {
  "nuxt": {
    "host": "localhost",
    "port": "9988"
  }
},

Angular

直接在运行时指定运行的端口号（至今版本都可生效）

• 可以host可以不用指定，只加端口号即可

ng serve --port=6666 --host=0.0.0.0 --open

修改package.json中运行的脚本 (angular7,8会不生效)

  "scripts": {
    "ng": "ng",
    "start": "ng serve --port=6666",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

修改配置文件

• 在根目录下的 node_modules/angular-cli/lib/config/schema.json找到 devServer下port
• 默认是4200

"devServer": {
    "description": "Dev Server target options for Architect.",
    "type": "object",
    "properties": {
        "browserTarget": {
            "type": "string",
            "description": "Target to serve."
         },
        "port": {
            "type": "number",
            "description": "Port to listen on.",
            "default": 4200
        },
        "host": {
            "type": "string",
            "description": "Host to listen on.",
            "default": "localhost"
        },
    },
},