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,即可启动一个服务查看打包后的项目,如下图所示:


相关推荐
mldong6 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排7 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60618 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角9 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!9 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰9 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi11 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen11 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马12 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒12 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端