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,如:下面打印出来一大堆。

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

相关推荐
颜酱10 小时前
理解 Webpack 的构建过程(实现原理),并实现一个 mini 版
前端·javascript·webpack
递归不收敛10 小时前
吴恩达机器学习课程(PyTorch适配)学习笔记:1.2 优化算法实践
pytorch·学习·机器学习
aesthetician10 小时前
Node.js 24.10.0: 拥抱现代 JavaScript 与增强性能
开发语言·javascript·node.js
前端老鹰10 小时前
解锁 JavaScript 字符串补全魔法:padStart()与 padEnd()
前端·javascript
代码or搬砖10 小时前
Git学习笔记(二)
笔记·git·学习
漫天星梦11 小时前
简约版3D地球实现,多框架支持
前端·vue.js
UpYoung!11 小时前
【Typora——MD编辑器】Typora最新 V1.12.1版:轻量级 Markdown 编辑器详细图文下载安装使用教程
学习·数学建模·编辑器·运维开发·个人开发
摸着石头过河的石头11 小时前
函数的超能力:JavaScript高阶函数完全指南
前端·javascript
LuckySusu11 小时前
【vue篇】Vue 模板编译全解析:从 Template 到 DOM 的奇妙旅程
前端·vue.js
LuckySusu11 小时前
【vue篇】Vue 响应式更新揭秘:数据变了,DOM 为何不立即刷新?
前端·vue.js