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

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

相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
豆沙沙包?3 小时前
5.学习笔记-SpringMVC(P61-P70)
数据库·笔记·学习
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
每次的天空5 小时前
Android学习总结之Room篇
android·学习·oracle
明似水5 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
HhhDreamof_6 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya6 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn016 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
Nuyoah.6 小时前
《Vue3学习手记5》
前端·javascript·学习
曹牧6 小时前
Java 调用webservice接口输出xml自动转义
java·开发语言·javascript