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

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

相关推荐
2402_857583494 分钟前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
java_heartLake1 小时前
Vue3之性能优化
javascript·vue.js·性能优化
Swift社区1 小时前
HarmonyOS 实践 - 设计模式在代码中的作用
javascript
少年姜太公1 小时前
从零开始详解js中的this(下)
前端·javascript·程序员
初遇你时动了情2 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
乔峰不是张无忌3302 小时前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
鸿蒙自习室2 小时前
鸿蒙UI开发——组件滤镜效果
开发语言·前端·javascript
ddd君317742 小时前
组件的声明、创建、渲染
vue.js
OopspoO2 小时前
qcow2镜像大小压缩
学习·性能优化
前端没钱3 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js