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

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

相关推荐
DKPT4 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
好好研究6 小时前
学习栈和队列的插入和删除操作
数据结构·学习
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
新中地GIS开发老师7 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF8 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Liudef068 小时前
2048小游戏实现
javascript·css·css3
Frank学习路上8 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
鱼樱前端9 小时前
今天介绍下最新更新的Vite7
前端·vue.js