Vite多环境配置实战指南

# Vite多环境配置实战指南 ## 一、前言一个项目通常会有开发、测试、生产等多个版本，不同环境需要请求不同的API接口，频繁更改配置十分麻烦。使用环境变量可以简化配置，将环境切换工作交给代码自动处理。 ## 二、开发环境开发环境即编码时运行的环境，通过执行 `npm run dev` 或 `npm run serve` 在本地运行项目时的环境。 ## 三、生产环境生产环境是项目部署到服务器后运行的环境。通过 `npm run build` 打包项目后，项目即运行在生产环境中。我们可以为不同环境配置不同的环境变量，以实现开发与生产的兼容。 ## 四、多环境前端工程架构流程 ![多环境架构流程图](https://oss.120120.top/blog/2024/01/08/1a48a0db5bd64fc6ac6776b5d499cf1e.png) ## 五、实战步骤 ```bash 1. 新建项目目录 2. 新建 index.html 3. npm init -y 4. npm i axios -S 5. npm i vite -D 6. 在 package.json 的 scripts 中添加 "dev": "vite" 7. npm run dev ``` 最终目录结构如下： ![目录结构](https://oss.120120.top/blog/2024/01/08/226d3cde4224485c838b93efa43131f7.png) 接下来新建 `vite.config.js` 文件： ```javascript import { defineConfig } from "vite"; export default defineConfig({ server: { open: false, // 项目启动时是否打开页面 host: "127.0.0.1", port: 3456, proxy: { "^/api/": { target: "https://www.bilibili.com/", // 后台服务器地址 changeOrigin: true, // 允许跨域 rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, }); ``` 然后新建 `main.js`，并在 `index.html` 中引入： ```javascript // main.js import axios from 'axios'; axios.get('/api/index/ding.json').then(res => { console.log(res.data); }); ``` ```html Vite学习 Vite开发环境、生产环境配置 ``` 打开浏览器，Axios 数据请求成功： ![请求成功](https://oss.120120.top/blog/2024/01/08/235441d04161460884a81993ff80045a.png) ## 六、配置环境文件 ### 1. 全局环境文件 (.env) 在项目根目录下（与 package.json 同级）新建 `.env` 文件： ```env NODE_ENV = env VITE_NAME='全局环境' VITE_BASE_URL='' ``` **说明**：全局环境文件，当没有设置其他环境变量时，会加载此文件内容。适用于所有版本使用同一接口地址的情况。 ### 2. 开发环境文件 (.env.development) 在项目根目录下新建 `.env.development` 文件： ```env NODE_ENV = development VITE_NAME='开发环境' VITE_BASE_URL='/api' ``` **说明**：开发环境配置文件。执行 `npm run dev` 命令时，会自动加载此文件，并覆盖 `.env` 文件中定义的环境变量。 ### 3. 生产环境文件 (.env.production) 在项目根目录下新建 `.env.production` 文件： ```env NODE_ENV = production VITE_NAME='生产环境' VITE_BASE_URL='http://xxxxxx/api' ``` **说明**：生产环境配置文件。执行 `npm run build` 命令时，会自动加载此文件，并覆盖 `.env` 文件中定义的环境变量。 ## 七、package.json 脚本配置 ```json { "scripts": { "dev": "vite --mode development", "build": "vite build --mode production", "start": "vite --mode production", "build:env": "vite build --mode development", "preview": "vite preview --mode production" } } ``` - `dev`：在本地开启开发环境服务（mode='development'） - `start`：在本地开启生产环境服务（mode='production'） - `build`：打包到生产环境（读取 .env.production 文件） - `build:env`：打包到测试环境（读取 .env.development 文件） - `preview`：预览生产环境构建结果 ## 八、环境变量使用 ### 8.1 开发环境打印环境变量： ```javascript console.log(import.meta.env); ``` 执行 `npm run dev`，浏览器控制台将打印 `.env.development` 文件中的内容。 ![开发环境变量](https://oss.120120.top/blog/2024/01/08/5f5162f633be4781ab718cb1d8e24d02.png) ### 8.2 生产环境预览直接使用 Live Server 运行打包后的 `dist/index.html` 可能无法正常请求数据，因为请求的接口是 Live Server 重新启动的服务。 **正确预览方式**： 1. 在 `package.json` 中添加 `"preview": "vite preview --mode production"` 2. 执行以下命令： ```bash npm run build npm run preview ``` ![预览命令](https://oss.120120.top/blog/2024/01/08/5a6897236f5042908745b718bf96b916.png) 浏览器中预览，接口请求正常： ![生产环境预览](https://oss.120120.top/blog/2024/01/08/6b7e2c36bcfb426a84e26e209c0b87a9.png) ## 九、在 vite.config.js 中动态切换配置 ### 9.1 defineConfig 函数参数当 `defineConfig` 传入函数时，可以接收 `command` 和 `mode` 参数： - `command`：'serve'（npm run dev）或 'build'（npm run build） - `mode`：'development' 或 'production' ```javascript export default defineConfig(({ command, mode }) => { console.log("command:", command); console.log("mode:", mode); return { base: "./", server: { open: false, host: "127.0.0.1", port: 3456, proxy: { "^/api/": { target: "https://www.bilibili.com/", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, }; }); ``` ### 9.2 使用 loadEnv 获取环境变量 `loadEnv` 函数接收三个参数： - `mode`：环境模式 - `envDir`：环境变量文件所在目录 - `prefix`：环境变量前缀（默认为 'VITE_'） ```javascript import { defineConfig, loadEnv } from "vite"; export default defineConfig(({ command, mode }) => { const config = loadEnv(mode, './'); console.log("环境变量配置:", config); return { base: "./", server: { open: false, host: "127.0.0.1", port: 3456, proxy: { "^/api/": { target: config.VITE_TARGET, // 从环境变量中获取 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, }; }); ``` ### 9.3 环境变量文件示例 **.env.development**： ```env NODE_ENV = development VITE_NAME = '开发环境' VITE_BASE_URL = '/api' VITE_TARGET = 'https://baidu.com/' ``` **.env.production**： ```env NODE_ENV = production VITE_NAME = '生产环境' VITE_BASE_URL = '' VITE_TARGET = 'https://www.bilibili.com/' ``` ## 十、总结通过合理配置环境变量，我们可以轻松管理不同环境下的前端工程配置。Vite 提供了完善的环境变量支持，结合 `loadEnv` 函数和 `defineConfig` 的参数，可以实现配置的动态切换，提高开发效率和部署灵活性。 --- *本文转自 [https://blog.csdn.net/blue_121/article/details/131221210](https://blog.csdn.net/blue_121/article/details/131221210)，如有侵权，请联系删除。*

Vite多环境配置实战指南

评论