如何修改Vue项目运行的IP和端口

当我们开发 Vue.js 项目时，默认情况下，项目运行在本地的 IP 地址和端口上。但是有些情况下，我们可能需要修改这些默认设置。下面是详细讲解如何修改 Vue.js 项目运行的 IP 和端口的攻略：

1. 修改 package.json 文件中的 scripts 配置

Vue.js 项目的 package.json 文件中有一项 scripts，其中包含了 "serve": "vue-cli-service serve" 命令。我们可以在新增一个命令参数来修改 IP 和端口。具体来说，假设我们想将 IP 修改为 192.168.0.2，端口修改为 8080，那么可以按照如下方式修改 scripts 配置：

"scripts": {
  "serve": "vue-cli-service serve --host 192.168.0.2 --port 8080"
},

修改完成后，我们可以使用 npm run serve 命令来启动项目。

2. 使用 .env 文件设置运行参数

除了可以通过 package.json 文件中的 scripts 配置来修改运行 IP 和端口以外，我们还可以使用 .env 文件来设置运行参数。具体来说，我们可以在项目根路径下新建一个 .env 文件，并在其中添加如下配置信息：

// .env 文件
HOST=192.168.0.2
PORT=8080

然后在 vue.config.js 中使用 process.env 来读取这些配置信息。具体实现方式如下：

// vue.config.js
module.exports = {
  devServer: {
    host: process.env.HOST,
    port: process.env.PORT,
    open: true
  }
}

这样我们再使用 npm run serve 命令来启动项目时，就会自动读取 .env 文件中的 HOST 和 PORT 配置信息了。

示例说明

下面给出两个示例说明：

示例1

我们想要将 Vue.js 项目运行在 IP 地址为 127.0.0.1 上，端口为 8888 时，可以使用如下命令配置：

"scripts": {
  "serve": "vue-cli-service serve --host 127.0.0.1 --port 8888"
},

或者可以在项目根路径下新建一个名为 .env 的文件，并在其中添加如下配置信息：

// .env 文件
HOST=127.0.0.1
PORT=8888

然后在 vue.config.js 中使用 process.env 来读取这些配置信息，具体实现方式如下：

// vue.config.js
module.exports = {
  devServer: {
    host: process.env.HOST,
    port: process.env.PORT,
    open: true
  }
}

示例2

我们想要将 Vue.js 项目运行在 IP 地址为 192.168.0.2 上，端口为 8080 时，可以使用如下命令配置：

"scripts": {
  "serve": "vue-cli-service serve --host 192.168.0.2 --port 8080"
},

或者可以在项目根路径下新建一个名为 .env 的文件，并在其中添加如下配置信息：

// .env 文件
HOST=192.168.0.2
PORT=8080

然后在 vue.config.js 中使用 process.env 来读取这些配置信息，具体实现方式如下：

// vue.config.js
module.exports = {
  devServer: {
    host: process.env.HOST,
    port: process.env.PORT,
    open: true
  }
}