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

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

相关推荐
加洛斯3 分钟前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
kunge1v57 分钟前
学习爬虫第三天:数据提取
前端·爬虫·python·学习
冬夜戏雪19 分钟前
[学习日记][springboot 1-7][leetcode 6道]
java·开发语言·学习
Keepreal49627 分钟前
Electron基本概念
前端·javascript·electron
趣味编程11127 分钟前
go的学习2---》并发编程
学习·golang·perl
zzzsde1 小时前
【Linux】linux基础指令入门(1)
linux·运维·学习
_hermit:1 小时前
【从零开始java学习|第二十二篇】集合进阶之collection
java·学习
Whbbit19991 小时前
在 Nestjs 中使用 Drizzle ORM
前端·javascript·nestjs
Never_Satisfied1 小时前
在JavaScript中,map方法使用指南
前端·javascript·vue.js
_码力全开_1 小时前
JavaScript从入门到实战 (1):JS 入门第一步:它是什么?能做什么?环境怎么搭?
开发语言·前端·javascript·新人首发