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

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

相关推荐
知识分享小能手2 分钟前
Vue3 学习教程,从入门到精通,Vue 3 表单控件绑定详解与案例(7)
前端·javascript·vue.js·学习·前端框架·vue3·anti-design-vue
江城开朗的豌豆10 分钟前
Vue图片懒加载:极简方案 vs 兼容全攻略
前端·javascript·vue.js
江城开朗的豌豆16 分钟前
Vue组件data必须用函数?这个设计暗藏玄机!
前端·javascript·vue.js
前端小巷子23 分钟前
web域名解析
前端·javascript·面试
amazinging23 分钟前
北京-4年功能测试2年空窗-报培训班学测开-第五十天
python·学习·面试
江城开朗的豌豆31 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
没有羊的王K37 分钟前
SSM框架学习DI入门——day2
java·spring boot·学习
公子绝37 分钟前
JAVA学习笔记 使用notepad++开发JAVA-003
java·学习·notepad++·java开发环境
本杰明1521 小时前
2025/7/14——java学习总结
java·开发语言·学习
The_era_achievs_hero1 小时前
微信131~140
开发语言·javascript·微信