Vite+Vue 3 环境变量配置

在开发 Web 应用时,我们常常需要根据不同的环境(如开发、测试、生产)进行不同的配置。

Vite 提供了灵活的环境变量配置机制在一个特殊的 import.meta.env 对象上暴露环境变量,这些变量在构建时会被静态地替换掉。让我们可以轻松管理这些差异。

env环境变量的作用

  • 在不同的环境下,请求不同的环境的服务;
  • 在不同环境下,加载不同的插件,或者代码判断某些场景。
  • 打包时的不同环境的配置。

我们可以使用多个环境变量文件来管理不同环境下的配置。这些文件通常放在项目根目录下,文件名格式为 .env.env.development.env.production 等。

基础环境变量文件

创建 .env 文件,用于存储所有环境通用的变量:

# .env
VUE_APP_TITLE = Vue App

本地环境变量文件

创建 .env.local 文件,用于存储所有环境通用的变量:

# .env.local
VUE_APP_API_URL= "http:127.0.0.1:3000/api"

开发环境变量文件

创建 .env.development 文件,用于存储开发环境下的变量:

# .env.development
VUE_APP_API_URL= http://xxx:3000/api

生产环境变量文件

创建 .env.production 文件,用于存储生产环境下的变量:

# .env.production
VUE_APP_API_URL= https://xxx.com

package.json文件配置

示例代码

{"name": "vite-project",...,//其他配置"scripts": {"dev": "vite -- mode development","loc": "vite -- mode localhost","build:dev": "vite build -- mode development","build:pro": "vite build -- mode production","build": "vite-tsc && vite build","preview": "vite preview"}
}
  • npm run dev,就是运行对应env.development环境,取其文件的内容使用。
  • npm run loc ,对应env.localhost文件。
  • npm run pro 一般不会这样。
  • npm build:dev 打包,打对应env.development环境包。
  • npm build:pro 打包,打对应env.production环境的包。
  • npm run preview 这是vite的黑科技,它可以启动本地服务,去运行或者叫预览你打的包dist文件。先npm run build:dev,再npm run preview

在代码中使用环境变量

在 Vue 3 项目中,我们可以通过 import.meta.env 访问环境变量。

示例代码

<template><div><h1>{{ title }}</h1><p>API URL: {{ apiUrl }}</p></div>
</template><script setup>
const title = import.meta.env.VUE_APP_TITLE;
const apiUrl = import.meta.env.VUE_APP_API_URL;
</script>

在构建过程中使用环境变量

除了在代码中使用环境变量,我们还可以在构建过程中根据不同的环境变量进行特定的操作。例如,可以根据环境变量配置不同的插件或优化选项。

Vite 配置

在使用 Vite 构建工具时,我们可以在 vite.config.ts 文件中访问环境变量:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],define: {'process.env': {VUE_APP_TITLE: JSON.stringify(process.env.VUE_APP_TITLE),VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL),},},
});

部署时的环境变量配置 

在实际部署中,我们通常会使用 CI/CD 工具来自动化部署流程。在部署过程中,可以根据不同的环境注入相应的环境变量。

示例代码

使用 GitHub Actions 配置环境变量,在 .github/workflows/deploy.yml 文件中,我们可以配置环境变量:

name: Deployon:push:branches:- mainjobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v2- name: Setup Node.jsuses: actions/setup-node@v2with:node-version: '14'- name: Install dependenciesrun: npm install- name: Build projectrun: npm run buildenv:VUE_APP_API_URL: ${{ secrets.PRODUCTION_API_URL }}- name: Deploy to serverrun: echo "Deploying..."

在 GitHub 仓库中设置 PRODUCTION_API_URL 秘密变量,以确保部署过程中使用正确的 API URL。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++笔记2

目录 2.2 栈底&#xff08;bottom&#xff09; } 大数乘大数 节点&#xff1a;包含一个数据元素及若干指向子树分支的信息 。 节点的度&#xff1a;一个节点拥有子树的数目称为节点的度 。 叶子节点&#xff1a;也称为终端节点&#xff0c;没有子树的节点或者度为零的节点…

JavaScript Promise:异步编程的新纪元

在 JavaScript 中&#xff0c;Promise 是一种用于处理异步操作的现代化方法&#xff0c;它解决了回调地狱&#xff08;Callback Hell&#xff09;的问题&#xff0c;提供了更简洁、更强大的异步编程模型。本文将深入探讨 Promise 的概念、工作原理、优势以及如何在实际项目中使…

Linux 防火墙配置【iptable,firewalld,ufw】

使用 iptables 添加端口 打开端口 假设你想要打开TCP的8080端口&#xff0c;可以使用以下命令&#xff1a; sudo iptables -A INPUT -p tcp --dport 8080 -j ACCEPT保存配置 不同的Linux发行版保存iptables规则的方法可能不同。常见的方法有&#xff1a; 对于基于Debian的系…

elmentui this.$confirm使用模板字符串构建HTML结构

tip(){const checkingList [];const findList[入会1,入会2,入会3] //数组const sueccList [{name:入会,suecc:1000,numcot:1000},{name:aaaaa,suecc:222,numcot:3333}] //数组对象var message// 使用模板字符串构建HTML结构if(sueccList.length>0){message <div>…

数据分析面试常见50个问题及解答要点

为了帮助各位学习数据分析的小伙伴们成功拿到offer&#xff01;本期给大家整理了一些数据分析面试时的高频问题&#xff0c;分享给大家 数据分析高频面试50题&#xff0c;点击下方链接进行下载完整版&#xff0c;下面展示部分面试题&#xff0c;希望大家积极点赞收藏加关注&…

Apache ShardingSphere Proxy5.5.0实现MySQL分库分表与读写分离

1. 前提准备 1.1 主机IP:192.168.186.77 version: 3.8services:mysql-master:image: mysql:latestcontainer_name: mysql-masterenvironment:MYSQL_ROOT_PASSWORD: 123456MYSQL_USER: masterMYSQL_PASSWORD: 123456MYSQL_DATABASE: db1 ports:- "3306:3306&quo…

ModuleNotFoundError: No module named ‘scrapy.utils.reqser‘

在scrapy中使用scrapy-rabbitmq-scheduler会出现报错 ModuleNotFoundError: No module named scrapy.utils.reqser原因是新的版本的scrapy已经摒弃了该方法,但是scrapy-rabbitmq-scheduler 没有及时的更新,所以此时有两种解决方法 方法一.将scrapy回退至旧版本,找到对应的旧版…

android13 Settings动态显示隐藏某一项

总纲 android13 rom 开发总纲说明 目录 1.前言 2.确定目标设置项 3.修改参考 3.1 方法1 3.2 方法2 4.编译测试 5.彩蛋 1.前言 在Android 13系统中,动态显示或隐藏Settings应用中的某一项通常涉及到对Settings应用的内部逻辑进行修改。由于Settings应用是一个系统应用…

Mybatis——快速入门

介绍 MyBatis是一款优秀的持久层&#xff08;Dao层&#xff09;框架&#xff0c;用于简化JDBC的开发。MyBatis 底层是基于 JDBC 实现的&#xff0c;它封装了 JDBC 的大部分功能&#xff0c;使得数据库操作更加便捷和高效。同时&#xff0c;MyBatis 也保留了 JDBC 的灵活性&…

通信原理-思科实验五:家庭终端以太网接入Internet实验

实验五 家庭终端以太网接入Internet实验 一实验内容 二实验目的 三实验原理 四实验步骤 1.按照上图选择对应的设备&#xff0c;并连接起来 为路由器R0两个端口配置IP 为路由器R1端口配置IP 为路由器设备增加RIP&#xff0c;配置接入互联网的IP的动态路由项 5.为路由器R1配置静…

锁相环 vivado FPGA

原理 同步状态/跟踪状态&#xff1a;相位差在2kπ附近&#xff0c;频率差为0到达上述状态的过程称为捕获过程锁相环的捕获带&#xff1a;delta w的最大值&#xff0c;大于这个值的话就不能捕获鉴相器&#xff08;PD-phase discriminator&#xff09;&#xff1a;相乘加LPF&…

Vue3 FileReader:readAsBinaryString() 过时,要使用readAsArrayBuffer来代替。

1、先上张图&#xff1a; 2、官网 developer.mozilla.org https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsBinaryString ​​​​​​​FileReader接口的 readAsBinaryString() 方法用于开始读取指定 Blob 或 File 对象的内容。当读操作完成后&#xff0…

免杀笔记 -->API的整理Shellcode加密(过DeFender)

最近更新频率明显下降我懒&#xff0c;那么今天就来记录一下我们的一些常用的API的整理以及ShellCode的加密。 1.WinAPI整理 问我为什么要整理&#xff1f; 就是用起来的时候要左翻右翻 &#xff1a;&#xff1a; 烦死了 1.VirtualAlloc VirtualAlloc(NULL,sizeof(buf),MEM_…

Redis 7.x 系列【29】集群原理之自动故障转移

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 案例演示3. 工作原理3.1 故障检测3.2 排名3.3 延迟等待3.4 投票3.5 上位 1.…

大型语言模型的生物医学知识图优化提示生成

大型语言模型的生物医学知识图优化提示生成 https://arxiv.org/abs/2311.17330 https://github.com/BaranziniLab/KG_RAG 大型语言模型的生物医学知识图优化提示生成 摘要 KG-RAG框架&#xff0c;较好的结合了生物医学知识图谱SPOKE和LLM的优势。SPOKE是一个开放知识图谱&…

东京裸机云多IP服务器全面分析

东京裸机云多IP服务器是一种提供多IP地址分配和高性能网络服务的云计算解决方案&#xff0c;广泛应用于需要多IP管理和高稳定性的网络应用。下面将从几个方面具体介绍东京裸机云多IP服务器&#xff0c;rak部落为您整理发布东京裸机云多IP服务器的全面分析。 在数字化时代&#…

深入探讨:如何在Shopee平台上安全运营多个店铺?

在Shopee平台上&#xff0c;卖家如何避免店铺被关联&#xff1f;这是一个关乎账号安全和业务持续性的重要问题。Shopee严格规定每个卖家只能拥有一个店铺&#xff0c;以维护市场竞争公平和购物体验的稳定性。如果你开了多个店铺被平台判定关联&#xff0c;会面临冻结或封禁的风…

扫雷-C语言

一、前言&#xff1a; 众所周知&#xff0c;扫雷是一款大众类的益智小游戏&#xff0c;它的游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子&#xff0c;同时避免踩雷&#xff0c;踩到一个雷即全盘皆输。 今天&#xff0c;我们的目的就是通过C语言来实现一个简…

SparkSql oom原因以及参数调优+数据倾斜解决方案

1、Spark历史版本对比 spark1 vs spark2 vs spark3 1、spark1引入内存计算的理念&#xff0c;解决中间结果落盘导致的效率低下。在理想状况下性能可达到MR的100倍。虽然提高了一定的计算效率&#xff0c;但也带来了大量的内存管理问题&#xff0c;典型的如内存oom问题频发。…

javaEE-02-servlet

文章目录 Servlet 技术servlet程序示例通过实现Servlet接口实现Servlet程序通过继承 HttpServlet 实现 Servlet 程序 Servlet的声明周期 ServletConfig 类ServletContext 类HttpServletRequest 类请求的转发 HttpServletResponse 类请求重定向 HTTP 协议GET 请求Post请求常用请…