Vite + Vue3项目配置环境变量

        在现代前端开发中，配置环境变量是一个重要的环节。它不仅能够帮助我们管理不同环境下的配置，还能提高项目的可维护性和灵活性。

        在本文中，博主将详细介绍如何在 Vite 和 Vue 3 项目中配置和使用环境变量。

1.什么是环境变量？

        所谓环境变量，其实是一种存储配置信息的方式，可以在应用运行时动态获取。通过配置环境变量，我们可以根据不同的环境(开发环境、测试环境、生产环境 等) 来加载不同的配置。

• 开发环境：开发环境是开发人员进行代码编写和调试的环境。

        (例如：我们编码使用的电脑)

• 测试环境：测试环境是为了对应用进行各种测试 (如功能测试、性能测试等) 而搭建的环境。
• 生产环境：生产环境是用户实际使用应用的环境。

        (例如：我们完成编码后，最终项目是运行在我们的服务器上)

2.创建Vite + Vue 3项目

此时，如果已经创建了一个Vite + Vue3的项目，那可以跳过此步骤，如果没有创建Vite + Vue 3 的项目，可以参考 Vite 创建 Vue 3 + TS项目 

3.配置环境变量

        这里博主只配置了两个环境的环境变量，即：开发环境 和 生产环境。

        3.1.创建开发环境配置文件

         项目根目录下(与src目录同级)，创建 .env.development 文件：

# .env.development  开发环境配置文件

# 开发环境
VITE_ENV = development

# 开发环境下，项目启动时运行的端口
VITE_PORT = 8080

# 开发环境下，项目启动时是否打开浏览器
VIITE_OPEN = true

# 开发环境下，后端接口的基础URL
VITE_API_URL = http://127.0.0.1:9000    # 博主是自己写后端，所以是本机地址

        3.2.创建生产环境配置文件

        项目根目录下(与src目录同级)，创建 .env.production 文件：

# .env.production 生产环境配置文件

# 生产环境
VITE_ENV = production

# 生产环境下，项目运行的端口
VITE_PORT = 8081

# 生产环境下，项目启动时是否打开浏览器
VIITE_OPEN = false

# 生产环境下，后端接口的基础URL
VITE_API_URL = http://XX.XX.XX.XX:9000

        Vite 在启动时会根据当前环境加载 .env 文件，例如 .env.development 用于开发环境。如果环境配置不正确，可能会加载到错误的 .env 文件，导致变量无法生效。 

        3.3.修改Vite配置文件(vite.config.ts)

        在我们 Vite 创建的项目中，.env.development 与 .env.production 文件是用来存储环境变量配置信息的，vite.config.ts 文件才是项目的配置文件。我们仍需要在 vite.config.ts 配置文件中引用我们刚才创建的两个环境变量配置文件。

// vite.config.ts 配置文件

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command, mode }) => {

    const env = loadEnv(mode, process.cwd())

    return {
        plugins: [vue()],
        server: {
            port: env.VITE_PORT as any,
            open: env.VITE_OPEN as string
        }
    }
})

正常情况下，这里会有一个报错：

        找不到模块“loadEnv”或其相应的类型声明。                                                                    

        这是由于我们使用的是 TypeScript 语言，项目运行在 TypeScript 环境下所导致，所以我们还需要安装 @types/node 模块：

        项目根路径下(与src目录同级)：

# 使用 npm 包管理器
npm install @types/node

# 使用 yarn 包管理器
yarn add @types/node

# 使用 pnpm 包管理器
pnpm install @types/node

4.检验配置是否成功

        以开发模式运行项目

# 开发环境下运行项目
npm run dev

        从控制台我们可以看见，项目最终运行的端口与我们在 .env.development 文件中所描述的一致。