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: Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build
        env:
          VUE_APP_API_URL: ${{ secrets.PRODUCTION_API_URL }}

      - name: Deploy to server
        run: echo "Deploying..."

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