在开发 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。