Vite+Vue 3 环境变量配置

在开发 Web 应用时，我们常常需要根据不同的环境（如开发、测试、生产）进行不同的配置。

Vite 提供了灵活的环境变量配置机制在一个特殊的 import.meta.env 对象上暴露环境变量，这些变量在构建时会被静态地替换掉。让我们可以轻松管理这些差异。

env环境变量的作用

• 在不同的环境下，请求不同的环境的服务；
• 在不同环境下，加载不同的插件，或者代码判断某些场景。
• 打包时的不同环境的配置。

我们可以使用多个环境变量文件来管理不同环境下的配置。这些文件通常放在项目根目录下，文件名格式为 .env、.env.development、.env.production 等。

基础环境变量文件

创建 .env 文件，用于存储所有环境通用的变量：

# .env
VUE_APP_TITLE = Vue App

本地环境变量文件

创建 .env.local 文件，用于存储所有环境通用的变量：

# .env.local
VUE_APP_API_URL= "http:127.0.0.1:3000/api"

开发环境变量文件

创建 .env.development 文件，用于存储开发环境下的变量：

# .env.development
VUE_APP_API_URL= http://xxx:3000/api

生产环境变量文件

创建 .env.production 文件，用于存储生产环境下的变量：

# .env.production
VUE_APP_API_URL= https://xxx.com

package.json文件配置

示例代码

{"name": "vite-project",...,//其他配置"scripts": {"dev": "vite -- mode development","loc": "vite -- mode localhost","build:dev": "vite build -- mode development","build:pro": "vite build -- mode production","build": "vite-tsc && vite build","preview": "vite preview"}
}

• npm run dev，就是运行对应env.development环境，取其文件的内容使用。
• npm run loc ，对应env.localhost文件。
• npm run pro 一般不会这样。
• npm build:dev 打包，打对应env.development环境包。
• npm build:pro 打包，打对应env.production环境的包。
• npm run preview 这是vite的黑科技，它可以启动本地服务，去运行或者叫预览你打的包dist文件。先npm run build:dev，再npm run preview

在代码中使用环境变量

在 Vue 3 项目中，我们可以通过 import.meta.env 访问环境变量。

示例代码

<template><div><h1>{{ title }}</h1><p>API URL: {{ apiUrl }}</p></div>
</template><script setup>
const title = import.meta.env.VUE_APP_TITLE;
const apiUrl = import.meta.env.VUE_APP_API_URL;
</script>

在构建过程中使用环境变量

除了在代码中使用环境变量，我们还可以在构建过程中根据不同的环境变量进行特定的操作。例如，可以根据环境变量配置不同的插件或优化选项。

Vite 配置

在使用 Vite 构建工具时，我们可以在 vite.config.ts 文件中访问环境变量：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],define: {'process.env': {VUE_APP_TITLE: JSON.stringify(process.env.VUE_APP_TITLE),VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL),},},
});

部署时的环境变量配置 

在实际部署中，我们通常会使用 CI/CD 工具来自动化部署流程。在部署过程中，可以根据不同的环境注入相应的环境变量。

示例代码

使用 GitHub Actions 配置环境变量，在 .github/workflows/deploy.yml 文件中，我们可以配置环境变量：

name: Deployon:push:branches:- mainjobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v2- name: Setup Node.jsuses: actions/setup-node@v2with:node-version: '14'- name: Install dependenciesrun: npm install- name: Build projectrun: npm run buildenv:VUE_APP_API_URL: ${{ secrets.PRODUCTION_API_URL }}- name: Deploy to serverrun: echo "Deploying..."

在 GitHub 仓库中设置 PRODUCTION_API_URL 秘密变量，以确保部署过程中使用正确的 API URL。