Vite多环境配置实战指南
Vite多环境配置实战指南
一、前言
一个项目通常会有开发、测试、生产等多个版本，不同环境需要请求不同的API接口，频繁更改配置十分麻烦。使用环境变量可以简化配置，将环境切换工作交给代码自动处理。
二、开发环境
开发环境即编码时运行的环境，通过执行 npm run dev 或 npm run serve 在本地运行项目时的环境。
三、生产环境
生产环境是项目部署到服务器后运行的环境。通过 npm run build 打包项目后，项目即运行在生产环境中。我们可以为不同环境配置不同的环境变量，以实现开发与生产的兼容。
四、多环境前端工程架构流程
五、实战步骤
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
最终目录结构如下：
接下来新建 vite.config.js 文件：
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 中引入：
// main.js
import axios from 'axios';
axios.get('/api/index/ding.json').then(res => {
console.log(res.data);
});
Vite学习
Vite开发环境、生产环境配置
打开浏览器，Axios 数据请求成功：
六、配置环境文件
1. 全局环境文件 (.env)
在项目根目录下（与 package.json 同级）新建 .env 文件：
NODE_ENV = env
VITE_NAME='全局环境'
VITE_BASE_URL=''
说明：全局环境文件，当没有设置其他环境变量时，会加载此文件内容。适用于所有版本使用同一接口地址的情况。
2. 开发环境文件 (.env.development)
在项目根目录下新建 .env.development 文件：
NODE_ENV = development
VITE_NAME='开发环境'
VITE_BASE_URL='/api'
说明：开发环境配置文件。执行 npm run dev 命令时，会自动加载此文件，并覆盖 .env 文件中定义的环境变量。
3. 生产环境文件 (.env.production)
在项目根目录下新建 .env.production 文件：
NODE_ENV = production
VITE_NAME='生产环境'
VITE_BASE_URL='http://xxxxxx/api'
说明：生产环境配置文件。执行 npm run build 命令时，会自动加载此文件，并覆盖 .env 文件中定义的环境变量。
七、package.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 开发环境
打印环境变量：
console.log(import.meta.env);
执行 npm run dev，浏览器控制台将打印 .env.development 文件中的内容。
8.2 生产环境预览
直接使用 Live Server 运行打包后的 dist/index.html 可能无法正常请求数据，因为请求的接口是 Live Server 重新启动的服务。
正确预览方式：
- 在
package.json中添加"preview": "vite preview --mode production" - 执行以下命令：
npm run build
npm run preview
浏览器中预览，接口请求正常：
九、在 vite.config.js 中动态切换配置
9.1 defineConfig 函数参数
当 defineConfig 传入函数时，可以接收 command 和 mode 参数：
command：'serve'（npm run dev）或 'build'（npm run build）mode：'development' 或 'production'
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_'）
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：
NODE_ENV = development
VITE_NAME = '开发环境'
VITE_BASE_URL = '/api'
VITE_TARGET = 'https://baidu.com/'
.env.production：
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，如有侵权，请联系删除。
