霍山有没有做建网站的,建设专业网站哪家更专业,论文答辩ppt模板免费下载,自媒体平台注册入口快看点#x1f31f; 前言 欢迎来到我的技术小宇宙#xff01;#x1f30c; 这里不仅是我记录技术点滴的后花园#xff0c;也是我分享学习心得和项目经验的乐园。#x1f4da; 无论你是技术小白还是资深大牛#xff0c;这里总有一些内容能触动你的好奇心。#x1f50d; #x… 前言 欢迎来到我的技术小宇宙 这里不仅是我记录技术点滴的后花园也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛这里总有一些内容能触动你的好奇心。 洛可可白个人主页 个人专栏✅前端技术 ✅后端技术 个人博客洛可可白博客 代码获取bestwishes0203 封面壁纸洛可可白wallpaper 文章目录 Vite多环境配置与打包灵活高效的Vue开发工作流1. 安装依赖2. 配置环境变量3. 应用环境变量4. 运行和构建项目 往期精彩回顾 Vite多环境配置与打包灵活高效的Vue开发工作流
Vite作为一个新兴的前端构建工具提供了快速的冷启动、即时模块热更新以及真正的按需编译极大地提高了Vue开发效率。本文将向你展示如何在Vite中设置多环境开发和打包包括如何配置环境变量、如何应用这些变量以及如何根据不同的环境进行项目的构建。通过这些步骤你可以确保在开发、测试和生产等不同阶段中你的应用都能以最佳状态运行。无论你是Vite的新手还是希望优化现有工作流的开发者本文都将为你提供实用的指导和建议。
1. 安装依赖
npm install --save-dev cross-env2. 配置环境变量
在项目根目录下创建 .env 文件分别为不同环境创建不同的环境变量配置。例如
.env默认环境.env.development开发环境.env.production生产环境
在这些文件中你可以设置不同的环境变量例如 API 端点或其他服务的配置。
# .env
VITE_API_URLhttps://api.example.com# .env.development
VITE_API_URLhttp://localhost:3000# .env.production
VITE_API_URLhttps://api.prod.example.com3. 应用环境变量
在项目中你可以通过 import.meta.env 访问这些环境变量。
// 在 Vue 组件或任何 JS 文件中
console.log(import.meta.env.VITE_API_URL);4. 运行和构建项目
使用不同的环境变量运行和构建项目。在命令行中你可以通过 --mode 选项指定环境。
# 开发环境
vite --mode development# 生产环境
vite build --mode production或者你可以在 package.json 的脚本中定义不同的命令以便更方便地运行和构建。
// package.json
{scripts: {dev: vite --mode development,build:dev: vite build --mode development,build:prod: vite build --mode production}
}然后你可以使用 npm 或 yarn 运行这些脚本
npm run dev
npm run build:dev
npm run build:prod或者如果你使用 Yarn
yarn dev
yarn build:dev
yarn build:prod通过这种方式你可以轻松地在不同的环境之间切换并针对不同的环境进行开发和打包。记得在部署到生产环境之前使用生产环境的配置进行构建以确保所有的环境变量和优化都已正确设置。
如果对你有帮助点赞、收藏、关注是我更新的动力 往期精彩回顾
Windows Edge 兼容性问题修复提升用户体验的关键步骤Vue2和Vue3组件通信父子与兄弟间的桥梁无缝集成使用Spring Boot和Vue实现头像上传与回显功能前端开发全景指南语言与框架的精粹C语言开发实战使用EasyX在Visual Studio 2022中创建井字棋游戏前端与后端协同实现Excel导入导出功能Java日期格式化掌握时间的艺术正则表达式完全指南语法、用法及JavaScript实例正则表达式与JSON序列化去除JavaScript对象中的下划线键名探索async/await的魔力简化JavaScript异步编程JavaScript日期格式化从原始值到用户友好的字符串入门教程Windows搭建C语言和EasyX开发环境CentOS系统下Docker的安装教程Spring Boot单元测试全指南使用Mockito和AssertJYarn简介及Windows安装与使用指南H5实现3D旋转照片墙教程Element-Plus 实现动态渲染图标教程MyBatis-Plus分页接口实现教程Spring Boot中如何编写分页查询
