Vue CLI多环境配置资料详解-原创手记-慕课网

概述

本文主要介绍了如何使用Vue CLI多环境配置资料来设置开发、测试和生产环境，并详细讲解了如何通过环境变量和配置文件实现不同环境下的正确设置。此外，文章还展示了如何使用vue.config.js文件和dotenv库来管理这些配置，确保项目的稳定性和高效性。

介绍

Vue CLI 是一个官方命令行工具，用于构建 Vue.js 项目。它提供了一套默认配置，涵盖了开发、构建、测试等多个方面，可极大地加快开发者构建 Vue.js 应用程序的效率。多环境配置是指在开发过程中，为不同的环境（如开发环境、测试环境、生产环境）配置不同的设置。这种配置方式可以确保在不同环境下，项目的部署、调试、测试等环节都能得到正确的配置，从而提高开发效率和项目的稳定性。

安装Vue CLI

Vue CLI 可以通过 npm 或 yarn 安装。以下是安装 Vue CLI 的步骤：

使用 npm 安装 Vue CLI
```
npm install -g @vue/cli
```
使用 yarn 安装 Vue CLI
```
yarn global add @vue/cli
```

安装完成后，可以通过 Vue CLI 创建一个新的 Vue.js 项目。使用以下命令初始化一个新的 Vue 项目：

vue create my-project

这将会打开一个交互式界面，引导你选择项目配置。或者，你可以指定配置文件直接使用：

vue create --preset ./preset.json my-project

配置多环境

在开发过程中，我们通常需要为不同的环境配置不同的设置。例如，开发环境可以开启热重载、开发工具，而生产环境则需要关闭开发工具、启用压缩等。常见的环境设置包括开发环境、测试环境和生产环境。

开发环境：主要用于本地开发，开启热重载、开发工具等。
测试环境：用于自动化测试，可能需要配置代理、不同的API端点等。
生产环境：用于部署到线上，可能需要关闭开发工具、启用压缩等。

为了支持多环境，Vue CLI 提供了 vue.config.js 配置文件，允许我们自定义构建、代理等设置。以下是在 vue.config.js 中的示例配置：

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000', // 开发环境代理设置
  },
  publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/', // 根据环境配置publicPath
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src' // 别名配置
      }
    }
  }
};

在这个示例中，我们使用了 process.env.NODE_ENV 环境变量来决定 publicPath 的值。接下来，我们需要设置这些环境变量来区分不同的环境。

使用dotenv加载环境变量

为了在不同的环境中使用不同的配置，我们可以使用 dotenv 库来加载不同的环境变量。dotenv 是一个 Node.js 的库，允许我们在不同的 .env 文件中定义环境变量。

安装dotenv库

npm install dotenv --save-dev

或者

yarn add dotenv --dev

创建.env文件并定义环境变量

在项目根目录下创建 .env 文件，并根据需要创建 .env.development、.env.production 等文件。每个文件中定义环境特定的变量。例如：

.env
```
API_URL=http://localhost:3000
```
.env.development
```
API_URL=http://localhost:3000
```
.env.production
```
API_URL=https://api.example.com
```

在 vue.config.js 中，我们可以通过 process.env 访问这些环境变量：

const dotenv = require('dotenv');
dotenv.config(); // 加载环境变量

module.exports = {
  devServer: {
    proxy: process.env.API_URL,  // 使用环境变量配置代理
  },
  publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/', // 根据环境配置publicPath
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src' // 别名配置
      }
    }
  }
};

根据环境使用变量

在项目中，我们可以通过 process.env 访问环境变量。例如，可以根据不同的环境切换 API 地址：

// src/api.js
export const API_URL = process.env.NODE_ENV === 'production'
  ? process.env.API_URL
  : process.env.API_URL;

export function fetchProduct(id) {
  return fetch(`${API_URL}/products/${id}`).then(response => response.json());
}

打包不同环境的代码

为了打包不同环境的代码，我们需要使用命令行参数来切换环境。我们可以使用 --mode 参数来指定构建模式。

使用命令行参数切换环境

在 package.json 中定义不同的构建脚本：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build --mode production", // 打包生产环境代码
    "build:test": "vue-cli-service build --mode test" // 打包测试环境代码
  }
}

生成针对不同环境的构建文件

在 vue.config.js 中配置 mode 以支持不同的构建模式：

module.exports = {
  configureWebpack: {
    mode: process.env.NODE_ENV,
  },
  publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/', // 根据环境配置publicPath
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src' // 别名配置
      }
    }
  }
};

使用上述命令可以分别构建不同环境的代码：

npm run build # 默认构建开发模式
npm run build:prod # 构建生产模式
npm run build:test # 构建测试模式

这些命令会根据 mode 的值加载不同的环境变量和配置文件，从而生成针对不同环境的构建文件。

通过这些配置，我们可以确保在开发、测试、生产等不同环境下，项目的构建过程能够得到正确的环境变量和配置。这不仅提高了开发效率，还增强了项目的健壮性和可维护性。