vue3+vite配置环境变量

1、创建环境变量文件 :首先在vue3项目根目录创建.env.development 和 .env.prodution两个文件,分别为开发和生产环境(必须.env.开头,需要额外环境,配置自定义的文件名称即可)

2、在环境变量文件分别写对应环境变量 ,注意变量必须要VITE_开头

3、开发环境配置和访问环境变量

3.1 访问环境变量前,需要在package.json 的dev中配置mode(生产环境不需要配置,生产打包默认是生产模式),如下:

3.2 在.vue页面或者入口文件main.ts访问环境变量,使用import.meta.env

启动本地环境,访问对应页面时,会打印以下信息,包含自定义的环境变量

3.3 在vite.config.ts中访问环境变量 :使用vite的loadEnv插件,需要将vite配置包裹在一个函数中,使用结构将当前mode模式拿到,如下所示:

4、在生产环境访问环境变量

4.1 打包项目,执行npm run build,生成了dist文件夹;

4.2 需要全局安装插件,npm install http-server -g,在dist文件夹打开终端,输入http-server -p 9091,即可启动一个服务查看打包后的项目,如下图所示:


相关推荐
郭邯1 分钟前
用 AI 写了一个经纬度格式转换工具,从需求到落地的完整过程
前端
不一样的少年_3 分钟前
修了 Bug、做了重构,为什么老板还是觉得你没产出?
前端·后端·程序员
马可家的菠萝7 分钟前
Vue3 + Canvas 手绘笔记工程化实践:别把画布只当成一张 PNG
前端·vue.js·算法
IMPYLH14 分钟前
HTML 的 <h1>–<h6> 元素
前端·javascript·html
IMPYLH17 分钟前
HTML 的 <head> 元素
前端·html
用户8417948145622 分钟前
如何用 vue 甘特图来实现计划和实际双任务条进度展示
vue.js
卸任38 分钟前
AI英语学习助手:从翻译工具到 AI 英语学习助手
前端·electron
计算机魔术师39 分钟前
A股人形机器人第一股来了!宇树科技8月19日上市,一签或赚20万
前端
PedroQue991 小时前
Vue Router 4.x风格导航守卫全面升级
前端·uni-app
cindershade1 小时前
前端大文件上传完整方案:分片上传、断点续传、秒传与失败重试
前端