如何在Ionic 6/Vue.js 3多应用项目配置文件中配置固定端口？

下面给你几个可行的办法，不用每次手动输入端口参数：

方法一：在根目录ionic.config.json中直接配置每个项目的端口 #

直接修改你现有的根配置文件，给每个项目添加serve字段指定端口：

{
  "defaultProject": "app1",
  "projects": {
    "app1": {
      "name": "app1",
      "integrations": {
        "capacitor": {}
      },
      "type": "vue",
      "root": "apps\\app1",
      "serve": {
        "port": 8100
      }
    },
    "app2": {
      "name": "app2",
      "integrations": {
        "capacitor": {}
      },
      "type": "vue",
      "root": "apps\\app2",
      "serve": {
        "port": 8101
      }
    },
    "app3": {
      "name": "app3",
      "integrations": {
        "capacitor": {}
      },
      "type": "vue",
      "root": "apps\\app3",
      "serve": {
        "port": 8102
      }
    }
  }
}

之后启动对应应用时，直接执行ionic serve --project app1，CLI会自动读取配置里的8100端口，不用额外加--port参数。

方法二：给每个子应用单独配置ionic.config.json #

在每个子应用的根目录（比如apps/app1/）创建自己的ionic.config.json，内容如下：

• app1的配置（apps/app1/ionic.config.json）：

{
  "name": "app1",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue",
  "root": ".",
  "serve": {
    "port": 8100
  }
}

• app2的配置（apps/app2/ionic.config.json）：

{
  "name": "app2",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue",
  "root": ".",
  "serve": {
    "port": 8101
  }
}

这种方式适合子应用需要独立配置的场景，启动时同样用ionic serve --project app2即可自动加载对应端口。

方法三：在package.json中封装启动命令 #

如果不想改配置文件，也可以在项目根目录的package.json里添加脚本命令，把端口参数固化进去：

{
  "scripts": {
    "serve:app1": "ionic serve --project app1 --port 8100",
    "serve:app2": "ionic serve --project app2 --port 8101",
    "serve:app3": "ionic serve --project app3 --port 8102"
  }
}

之后启动应用时，直接执行npm run serve:app1就能快速启动对应端口的服务。

内容的提问来源于stack exchange，提问作者Esteban