vue3 环境变量

开发环境:
.env.development

VITE_HTTP=http://www.baidu.com

生成环境:

.env.production

VITE_HTTP=http://www.jd.com

获取环境里的值

<template></template>

<script setup lang="ts">
console.log(import.meta.env);
</script>

<style></style>

vite获取环境里的路径

import { defineConfig,loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from "unplugin-auto-import/vite";
import unocss from 'unocss/vite'
import { presetIcons, presetAttributify, presetUno } from "unocss";
import { ElectronDevPlugin } from "./plugins/vite.electron.dev"
 
 // https://vitejs.dev/config/
export default ({ mode }: any) => {
  console.log(mode)
  console.log(loadEnv(mode,process.cwd()))
  return defineConfig({
  plugins: [
    vue(),
    vueJsx(), 
    ElectronDevPlugin(),
    unocss({
     presets:[presetIcons(),presetAttributify(),presetUno()],
      rules:[
       ['flex', { display: "flex" }],
        ['red',{color:'red'}],
         [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
     ],
     shortcuts: {
      btn: "pink flex"
    }
  }),
    AutoImport({
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
  ],
});
}

结果:
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/258254.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

图片处理软件DxO PhotoLab 6 mac高级工具

DxO PhotoLab 6 mac是一款专业的RAW图片处理软件&#xff0c;适用于Mac操作系统。它具有先进的图像处理技术和直观易用的界面&#xff0c;可帮助用户轻松地将RAW格式的照片转换为高质量的JPEG或TIFF图像。 DxO PhotoLab 6支持多种相机品牌的RAW格式&#xff0c;包括佳能、尼康、…

【docker】数据管理

Docker容器会随时关闭和开启,Docker 容器的数据放哪里呢&#xff1f; 答案就是&#xff1a;数据卷和数据卷容器 官网文档 Manage data in Docker | Docker Docs 数据卷(Data Volume) 数据卷就是将宿主机的某个目录&#xff0c;映射到容器中&#xff0c;作为数据存储的目录&…

21 3GPP中 5G NR高速列车通信标准化

文章目录 信道模型实验——物理层设计相关元素μ(与子载波间隔有关)设计参考信号(DMRS) 本文提出初始接入、移动性管理、线性小区设计等高层技术。描述3GPP采用HST场景的评估参数&#xff0c;阐释了HST应用的物理层技术&#xff0c;包括数字通信和参考信号设计&#xff0c;链路…

基于PHP的蛋糕购物商城系统

有需要请加文章底部Q哦 可远程调试 基于PHP的蛋糕购物商城系统 一 介绍 此蛋糕购物商城基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈&#xff1a;phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销…

【大数据存储与处理】实验四 MongoDB 文档操作

实验四 MongoDB 文档操作 【实验目的】&#xff1a; 1. 掌握 MongoDB CRUD 基本操作&#xff1b; 2. 掌握 MongoDB 插入文档 3. 掌握 MongoDB 更新文档 4. 掌握 MongoDB 删除文档 5. 掌握 MongoDB 删除集合。 【实验内容与要求】&#xff1a; MongoDB 是一个介于关系数…

深入理解PyTorch中的Hook机制:特征可视化的重要工具与实践

文章目录 一、前言1. 特征可视化的重要性2. PyTorch中的hook机制简介 二、Hook函数概述1. Tensor级别的hook&#xff1a;register_hook()2. Module级别的hook 三、register_forward_hook()详解1. 功能与使用场景2. 示例代码与解释3. 在特征可视化中的具体应用 四、register_bac…

HarmonyOS播放视频及音乐

效果如下 代码 Entry Component struct PageVideo {State videoSrc: Resource $rawfile(AndroidVideo.mp4)State previewUri: Resource $rawfile(6_20231218171028A068.jpg)State curRate: PlaybackSpeed PlaybackSpeed.Speed_Forward_1_00_XState isAutoPlay: boolean fal…

js按顺序循环接口返回数据,组合成新数据

有时候我们需要根据一个参数&#xff0c;通过接口返回的数据进行一一对应。形成请求参数又有对应的返回结果的新数据。 新数据格式1&#xff1a;一个对象包含请求参数和返回值 现在vue项目里有个字典接口&#xff0c;该页面很多地方要调用字典接口&#xff0c;需要写个循环将…

IIOT与IOT:什么是工业物联网?为什么需要工业物联网?

工业物联网也被称作工业4.0或工业互联网&#xff0c;是物联网的一个子集&#xff0c;其通过通信技术连接的众多工业设备组成的网络&#xff0c;使系统能够以前所未有的方式监控、收集、交换、分析和提供有价值的新见解&#xff0c;以帮助工业企业做出更智能、更快速的业务决策。…

告诉你playwright 不使用with sync_playwright() as编写脚本的新方法

大家都知道playwright代码的标准写法是&#xff1a; with sync_playwright() as p:browser p.chromium.launch(channel"chrome", headlessFalse)page browser.new_page()page.goto("http://www.baidu.com")print(page.title())browser.close() with sy…

解决ESP8266无法退出透传问题以及获取网络时间以及天气方法

网上很多配置ESP8266的教程&#xff0c;但是遇到无法退出透传模式的情况却没有找得到答案&#xff0c;不知道是大家都没遇到还是怎么样&#xff0c;以下是我的解决方法&#xff1a;实测有效 先发送“”&#xff08;三个加号&#xff09;&#xff08;如果是在串口调试助手调试&…

硕迪填报如何自动生成UUID并存入数据库

硕迪填报如何自动生成UUID并存入数据库 需求&#xff1a;1、在不修改jsp页面的情况下&#xff0c;如何生成一个UUID并存入数据库&#xff1f; 2、修改数据时&#xff0c;根据UUID去更新数据。 现在我总结一个更简洁的方法&#xff0c;具体操作步骤如下&#xff1a; 1、填报表…

SpringBoot知识点回顾01

Spring是为了解决企业级应用开发的复杂性而创建的&#xff0c;简化开发。 Spring是如何简化Java开发的 为了降低Java开发的复杂性&#xff0c;Spring采用了以下4种关键策略&#xff1a; 1、基于POJO的轻量级和最小侵入性编程&#xff0c;所有东西都是bean&#xff1b; 2、通…

WebGL开发虚拟旅游应用

WebGL可以用于开发虚拟旅游应用&#xff0c;提供用户在浏览器中探索虚拟景点和环境的交互体验。以下是在WebGL中开发虚拟旅游应用的一般流程&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.需求分析…

Sqoop入门:如何下载、配置和使用

下载和配置 Sqoop是Apache的一个开源工具&#xff0c;主要用于在Hadoop和关系数据库之间传输数据。以下是一些关于如何下载和配置Sqoop的步骤&#xff1a; 下载Sqoop&#xff1a;你可以从Apache的官方网站下载Sqoop。大多数企业使用的Sqoop版本是Sqoop1&#xff0c;例如sqoop-…

flink 读取 apache paimon表,查看source的延迟时间 消费堆积情况

paimon source查看消费的数据延迟了多久 如果没有延迟 则显示0 官方文档 Metrics | Apache Paimon

杰发科技AC7840——SPM电源管理之低功耗模式

0、SPM简介 很早以前就听过低功耗模式&#xff0c;一直没有怎么深入了解&#xff0c;最近遇到几个项目都是跟低功耗有关。正好AutoChips的芯片都有电源管理的功能&#xff0c;在此借用AC7840的SPM对低功耗进行测试。 1、AC7840的5种功耗模式 2、AC7840的模式转换 3、唤醒 在…

Nacos-服务发现与配置管理v1.0

Nacos - 服务发现和配置管理 教学目标 1&#xff09;能够理解微服务架构的特点 2&#xff09;能够理解服务发现的流程 3&#xff09;能够说出Nacos的功能 4&#xff09;掌握Nacos的安装方法 5&#xff09;掌握RESTful服务发现开发方法 6&#xff09;掌握Dubbo服务发现开…

LeetCode 583两个字符串的删除操作 72编辑距离 | 代码随想录25期训练营day56

动态规划算法13 LeetCode 583 两个字符串的删除操作 2023.12.19 题目链接代码随想录讲解[链接] int minDistance(string word1, string word2) {//思路1&#xff0c;求除了最长公共序列外&#xff0c;两个字符串需删除的字符数//以下为求最长公共序列长度的动态规划方法/*v…

让AIGC成为你的智能外脑,助力你的工作和生活

人工智能成为智能外脑 在当前的科技浪潮中&#xff0c;人工智能技术正在以前所未有的速度改变着我们的生活和工作方式。其中&#xff0c;AIGC技术以其强大的潜力和广泛的应用前景&#xff0c;正在引领着这场革命。 AIGC技术是一种基于人工智能的生成式技术&#xff0c;它可以通…