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

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

相关推荐
非凡ghost1 小时前
Wireshark中文版(网络抓包工具)
网络·windows·学习·测试工具·wireshark·软件需求
wdfk_prog3 小时前
[Linux]学习笔记系列 -- [driver]base
linux·笔记·学习
摘星编程3 小时前
React Native for OpenHarmony 实战:Linking 链接处理详解
javascript·react native·react.js
am心3 小时前
学习笔记-套餐接口
笔记·学习
胖者是谁3 小时前
EasyPlayerPro的使用方法
前端·javascript·css
EndingCoder3 小时前
索引类型和 keyof 操作符
linux·运维·前端·javascript·ubuntu·typescript
科技林总3 小时前
【系统分析师】3.6 操作系统
学习
摘星编程4 小时前
React Native for OpenHarmony 实战:ImageBackground 背景图片详解
javascript·react native·react.js
摘星编程5 小时前
React Native for OpenHarmony 实战:Alert 警告提示详解
javascript·react native·react.js
Joe5565 小时前
vue2 + antDesign 下拉框限制只能选择2个
服务器·前端·javascript