vue-cli 启动项目时控制台添加服务器地址

如何让 vue-cli 创建的项目启动时在控制台新增可访问服务地址

背景

现在我们公司的项目是用 vue-cli 创建的，包管理器使用的是 npm。因为我们的项目是投放到移动端的，所以会非常频繁的在手机上预览调试查看日志。在启动项目后，network 服务地址只有两行，分别是 WebSocket 和 SockJS，并没有服务地址，如 127.0.0.1:8080 或 localhost:8080，这就导致了在移动端无法访问，也无法调试日志。

解决方法

为了解决这个问题，需要修改 vue-cli 的配置文件。

首先，找到项目根目录下的 package.json 文件。

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-cli-service": "^3.11.0",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.1"
  }
}

在 "scripts" 对象中，找到 "serve" 脚本。

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve"
  },
  ...
}

修改 "serve" 脚本，在命令的末尾添加 --host 0.0.0.0 --port 8080。

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0 --port 8080"
  },
  ...
}

保存 package.json 文件。

然后，运行 npm run serve 命令启动项目。

$ npm run serve

此时，在控制台中可以看到新增了服务地址，如 http://0.0.0.0:8080 或 http://localhost:8080。

在移动端，可以使用该服务地址访问项目。

示例代码

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0 --port 8080"
  },
  ...
}

运行 npm run serve 命令启动项目。

$ npm run serve

此时，在控制台中可以看到新增了服务地址，如 http://0.0.0.0:8080 或 http://localhost:8080。

在移动端，可以使用该服务地址访问项目。