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,即可启动一个服务查看打包后的项目,如下图所示:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/769676.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android内存优化项目经验分享 兼顾效率与性能

背景 项目上线一段时间后,回顾重要页面 保证更好用户体验及生产效率,做了内存优化和下载导出优化,具体效果如最后的一节的表格所示。 下面针对拍摄流程的两个页面 预览页 导出页优化实例进行介绍: 一.拍摄前预览页面优化 预览效果问题 存在…

试试前端自动化测试(基础篇)

众所周知的原因,前端作为一种特殊的 GUI 软件,做自动化测试困难重重。在快速迭代,UI 变动大的业务中,自动化测试想要落地更是男上加男 🐶。 近期的学习过程中,翻阅了众多前端自动化测试相关的文章&#xf…

【兆易创新GD32H759I-EVAL开发板】 关于LVGL 的内存配置

【兆易创新GD32H759I-EVAL开发板】拥有外部32MB的 SDRAM 在使用LVGL时 可以随意分配大小 但是我们也应该明白 所定义的内存大小的 的一些概念 LVGL中 有单独的 定义 LV_MEM_SIZE 定义内存大小 LVLG 中 在定义 显示程序 接口时 还需要用到 lv_disp_draw_buf_init() 分配显存…

MyBatis框架解析与优化

MyBatis 是一个半 ORM(对象关系映射)框架,它内部封装了 JDBC,开发时只需要关注 SQL 语句本身,不需要花费精力去处理加载驱动、创建连接、创建 statement 等繁杂的过程。 什么是 MyBatis? MyBatis 是一个半…

【3D reconstruction 学习笔记】

三维重建 3D reconstruction 1. 相机几何针孔相机摄像机几何 2. 相机标定线性方程组的解齐次线性方程组的解非线性方程组的最小二乘解透镜相机标定带畸变的相机标定 3. 单视图重建2D平面上的变换3D空间上的变换单视测量无穷远点 无穷远线 无穷远平面影消点 影消线单视重构 4. 三…

天艺制盖邀您参观2024第七届世界燕窝及天然滋补品博览会

2024第七届世界燕窝及天然滋补品博览会 2024年8月7-9日| 上海新国际博览中心 上海燕博会 世界燕窝及天然滋补品展览会暨世界滋补产业生态发展大会(简称上海燕博会),2017年创办于中国上海,是一年一度的世界燕窝滋补品行业盛会。…

宁波中墙建材施工过程中,如何确保陶粒复合砌块的垂直度和水平度符合要求?

宁波中墙建材陶粒复合砌块如何使用 确保陶粒复合砌块施工质量的建议: 基层处理:在施工前,确保基层干净、平整、坚固,去除表面的杂物和油污等。 砌块质量:选择质量好、尺寸规格一致的陶粒复合砌块,避免使用有…

【串口开发】android 智能设备开发 知识笔记

1.一般的波特率选择115200,自己玩的可以用9600等随便的 2.为了android方便操作,引入了 implementation com.licheedev:android-serialport:2.1.3包。 不然就得手写了,比如像这样 ,打开串口监听 // 打开串口boolean openSerialPort = mSerialPortManager.setOnOpenSerial…

每天一个数据分析题(二百二十八)

在超参数调参的各种方法中,贝叶斯优化搜索(Bayesian Optimization)是一种非常有效的方法。请问在贝叶斯搜索中,用于估计目标函数并为下一次迭代提供建议的模型是什么? A. 线性回归 B. 随机森林 C. 高斯过程 D. 神经网络 题目来源于CDA模…

vue js有哪些优点和缺点

Vue.js 是一个流行的前端 JavaScript 框架,用于构建用户界面和单页面应用。以下是 Vue.js 的一些主要优点和缺点: 优点: 轻量级和简洁:Vue.js 的核心库专注于视图层,并且非常轻量,这使得它可以很容易地与其…

java算法题每日多道六

138. 随机链表的复制 题目 给你一个长度为 n 的链表,每个节点包含一个额外增加的随机指针 random ,该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成,其中每个新节点的值都设为其对…

JS异步操作

点击按钮触发onScan函数,函数调用扫描二维码这个异步操作后,需要扫描二维码的函数返回结果,可以用Promise来实现。Promise对象状态变为resolved(成功)或rejected(失败),然后将解决&a…

运放PSRR与开关电源纹波分析的实际案例分享!

本文来自看海原创视频教程:《运放秘籍》运算放大器基础精讲及应用第一部*开天 微信公众号:工程师看海 【淘宝】https://m.tb.cn/h.5PAjLi7?tkvmMLW43KO7q CZ3457 「运放秘籍_运算放大器Multisim仿真视频教程第一部开天_工程师看海」 点击链接直接打开 …

前端逻辑错误或UI崩溃解决问题

全屏错误覆盖层或UI崩溃 VueReact(错误边界) Vue Vue的全屏错误覆盖层解决,其实只需要配置Error就好,在开发服务器的client.overlay中设置关闭全屏覆盖层 module.exports {devServer: {client: {overlay: {warnings: false,error…

安卓面试题多线程41-45

41. Java中都有哪些同步器?1.synchronized关键字   在Java中,使用synchronized关键字可以对代码块或方法进行同步,使得在同一时刻只有一个线程可以执行该代码块或方法。   下面是一个使用synchronized关键字同步的示例代码: public class SynchronizedExample {private…

Android下的Touch事件分发详解

文章目录 一、事件传递路径二、触摸事件的三个关键方法2.1 dispatchTouchEvent(MotionEvent ev)2.2 onInterceptTouchEvent(MotionEvent ev)2.3 onTouchEvent(MotionEvent event) 三、ViewGroup中的dispatchTouchEvent实现四、总结 在Android系统中,触摸事件的分发和…

k8s入门到实战(一)—— kubernetes概述

k8s 概述 k8s github地址:https://github.com/kubernetes/kubernetes 官方文档:https://kubernetes.io/zh-cn/docs/home/ k8s,全程是 kubernetes,这个名字源于希腊语,意为"舵手"或"飞行员” k8s 这…

mysql忘记root密码

一、用安全模式启动mysql 在 my.ini(windows的安装目录)或 /etc/my.cnf(linux) 的最后一行添加 skip-grant-tables1 重启mysql服务 systemctl restart mysqld 二、创建admin用户 免密码使用root登录进去 $ mysql -uroot 创建…

启动性能优化

一、应用启动慢的原因 1.在主线程执行了太多耗时的操作,比如加载数据,或者初始化三方库等等,导致在Application的oncreate或者Activity的oncreate方法中耗时太久 2.布局嵌套太深,或者一些不会立即使用的布局也在一开始一起加载到…

Linux-Miniconda安装

下载miniconda安装文件 get "https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-latest-Linux-x86_64.sh" -O ~/miniconda.sh 如果是其它系统或者架构,访问地址获取对应安装脚本: https://mirrors.tuna.tsinghua.edu.cn…