Vue学习记录之二十三 Vue3环境变量的使用

一、查看系统默认的环境变量

在项目的App.vue查看环境变量

ts 复制代码
<template>
    <div></div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
console.log(import.meta.env)
</script>

二、自定义环境变量

我们在根目录下创建两个文件。

添加为环境变量,如果我们想使用开发环境,package.json 中的启动命令行名直接加 --mode 和自定义环境配置文件的后缀。生产环境(pnpm run build)不需要配置,会自动寻找加载.env.production中的配置。

然后在环境变量中就会显示

运行 pnpm run build

第一种运行方式:

第二种运行方式:使用http-server

npm install http-server -g

如果已安装,可以忽略。

三、在vite.config.ts 中使用环境变量

这里面是是无法直接使用的。这里是node环境,可以使用process,如:下面打印出来一大堆。

需要将函数改为箭头函数。

相关推荐
北辰alk21 分钟前
解决Vue打包后静态资源图片失效的终极指南
vue.js
摸鱼的春哥1 小时前
AI编排实战:用 n8n + DeepSeek + Groq 打造全自动视频洗稿流水线
前端·javascript·后端
梦雨羊1 小时前
Base-NLP学习
人工智能·学习·自然语言处理
丝斯20112 小时前
AI学习笔记整理(42)——NLP之大规模预训练模型Transformer
人工智能·笔记·学习
小猪佩奇TONY2 小时前
Linux 内核学习(14) --- linux x86-32 虚拟地址空间
linux·学习
Coder_Boy_2 小时前
基于SpringAI的在线考试系统设计总案-知识点管理模块详细设计
android·java·javascript
副露のmagic2 小时前
更弱智的算法学习 day28
学习
ha20428941942 小时前
Linux操作系统学习记录之---TcpSocket
linux·网络·c++·学习
Jing_Rainbow3 小时前
【Vue-2/Lesson62(2025-12-10)】模块化与 Node.js HTTP 服务器开发详解🧩
前端·vue.js·node.js
冴羽3 小时前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js