Vite学习教程 Vite+Vue2配置环境变量

文章目录

• 1、安装依赖
• 2、配置环境变量
• 3、应用环境变量
• 4、运行和构建项目
• 文章标签+摘要+封面图（可忽略）

1、安装依赖

npm install --save-dev cross-env

---

2、配置环境变量

在项目根目录下创建 .env 文件，分别为不同环境创建不同的环境变量配置。例如：

• .env：默认环境
• .env.development：开发环境
• .env.production：生产环境

# .env
VITE_API_URL=http://localhost:3000

# .env.development
VITE_API_URL=http://localhost:3000

# .env.production
VITE_API_URL=https://api.prod.example.com

注意：对于网络服务的变量名VITE_API_URL必须VITE_开头，否则获取不到，无效。

---

3、应用环境变量

在项目中，你可以通过 import.meta.env 访问这些环境变量。

// 在 Vue 组件或任何 JS 文件中
console.log("import.meta.env=>", import.meta.env)
console.log("import.meta.env.VITE_API_URL=>", import.meta.env.VITE_API_URL)

实操下：

效果：

---

4、运行和构建项目

使用不同的环境变量运行和构建项目。在命令行中，你可以通过 --mode 选项指定环境。

# 开发环境
vite --mode development

# 生产环境
vite build --mode production

可以在 package.json 的脚本中定义不同的命令，以便更方便地运行和构建：

// package.json
{
  "scripts": {
    "dev": "vite --mode development",
    "pro": "vite --mode production",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "preview": "vite preview"
  },
}

此时我们运行与构建项目命令为：

npm run dev
npm run build:dev
npm run build:pro

文章标签+摘要+封面图（可忽略）

博客摘要： 本文详细阐述了在Vite项目中如何安装依赖、配置环境变量、在项目中应用这些变量以及如何根据不同环境运行和构建项目。首先，通过npm安装cross-env来管理跨平台的环境变量。接着，创建.env文件并为不同环境设置变量，强调变量名必须以VITE_开头。然后，展示了如何在代码中通过import.meta.env访问这些变量。最后，介绍了如何使用Vite命令行工具和package.json脚本在不同模式下运行和构建项目。

文章标签：

1. Vite环境配置
2. 环境变量管理
3. 前端构建

博客展示首图描述： 主标题：Vite环境变量指南 副标题：配置与应用 描述：掌握Vite项目中环境变量的配置和应用，提升开发效率。