Vue项目打包后修改配置后端IP地址、端口等信息方法

2023-09-25 04:42:01

灵活修改 Vue 项目后端配置：使用环境变量和配置文件

前言

在 Vue 项目的开发过程中，后端配置信息，如 IP 地址和端口，需要根据不同环境进行调整，例如开发环境和生产环境。为了方便快速修改这些配置，本文将介绍两种方法：使用环境变量 和使用配置文件 。

使用环境变量

环境变量是在运行时可修改的变量，允许你在构建项目时设置特定的配置信息。在 Vue 项目中，可以通过环境变量来存储后端配置信息。

在 package.json 文件中配置环境变量

在 package.json 文件的 scripts 对象中，定义一个环境变量，并指定其默认值。
```
{
  "scripts": {
    "build": "cross-env NODE_ENV=production vue-cli-service build"
  },
  "cross-env": {
    "NODE_ENV": "development"
  }
}
```
在这个示例中，NODE_ENV 环境变量被定义，默认值为 development。
在构建时设置环境变量

在构建项目时，可以通过命令行参数设置环境变量。例如，以下命令将 NODE_ENV 设置为 production：
```
cross-env NODE_ENV=production vue-cli-service build
```
在 Vue 项目中获取环境变量

在 Vue 项目中，可以使用 process.env 对象来获取环境变量。例如，获取 NODE_ENV 的值：
```
const env = process.env.NODE_ENV;
```
然后，可以根据环境变量的值设置后端配置信息。

使用配置文件

另一种修改后端配置信息的方法是使用配置文件，如 .env 文件。这个文件在 Vue 项目的根目录中创建。

创建 .env 文件

在项目根目录下，创建一个名为 .env 的文件，并添加以下内容：
```
VUE_APP_BACKEND_ADDRESS=192.168.1.100
VUE_APP_BACKEND_PORT=8080
```
在 Vue 项目中获取配置

在 Vue 项目中，可以使用 import.meta.env 对象来获取 .env 文件中的配置。例如，获取后端地址：
```
const backendAddress = import.meta.env.VUE_APP_BACKEND_ADDRESS;
```
在构建时覆盖配置

在构建项目时，可以通过命令行参数覆盖 .env 文件中的配置。例如，以下命令覆盖 VUE_APP_BACKEND_ADDRESS 的值：
```
vue-cli-service build --env.VUE_APP_BACKEND_ADDRESS=192.168.1.200
```