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 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手4 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one4 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲4 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell5 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830946 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
茯苓gao7 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾7 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
前端工作日常7 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip8 小时前
JavaScript事件流
前端·javascript