vue3如何配置环境和打包

很多新手友友们或刚从vue2切换到vue3的同学,对vue3不同环境配置和打包有很多困惑的地方,Jenna这就把vue3打包配置流程详细的写下来,你们只需要copy就好啦

1.创建环境文件

当我们把项目拿到手,只需要创建三个环境文件:.env.development,.env.test,.env.production

我解释下文件里三个变量的含义:

1.NODE_ENV指的是node.js的运行环境,我们一般分为开发、测试、和生产环境。

2.VITE_BASE_ENV这个是我自己自定义的标识,因为在我的项目开发中,总会有根据不同环境展示不同图片的需求,所以我自定义了一个标识,通过import.meta.env.VITE_BASE_ENV判断环境,你们可以不写这个变量

3.VITE_BASE_PATH这个变量就是接口地址,后端给你什么地址,你就写什么地址好了

2.配置vite.config.vue

我们在上个步骤配置好VITE_BASE_PATH变量后,就可以找到自己封装axios的文件,配置一下基地址,就是VITE_BASE_PATH里的东西,我们通过 baseURL:import.meta.env.VITE_BASE_PATH就配置好接口地址啦

3.打包配置

最后一步配置打包命令,找到你的package.json文件,里面我配置了三个build命令,

1."build:dev": "vite build --mode development"命令这条命令使用 Vite 的 build 命令来构建项目,并指定使用 development 模式。意思就是Vite 会加载项目根目录下 .env.development 文件中的环境变量。所以mode后面跟的文件名要跟你创建的文件名保持一致,要不然执行命令时就会找不到文件位置而出错。

2."build:test": "vite build --mode test",这条命令使用 Vite 的 build 命令来构建项目,并指定使用 test 模式。

3."build:prod": "vite build --mode production",这条命令使用 Vite 的 build 命令来构建项目,并指定使用 production 模式。

配置好后就可以执行命令打包啦,我的包管理工具是yarn,所以开发环境、测试环境、线上环境分别执行yarn build:dev\yarn build:test,yarn build:prod就可以了

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

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

相关文章

《AJAX:前端异步交互的魔法指南》

什么是AJAX AJAX(Asynchronous JavaScript and XML,异步 JavaScript 和 XML) 是一种用于创建异步网页应用的技术,允许网页在不重新加载整个页面的情况下,与服务器交换数据并局部更新页面内容。尽管名称中包含 XML&…

STM32-I2C通信协议

目录 一:什么是I2C通信协议 二:I2C通信 三:I2C时序图 四:面试常见问题 一:什么是I2C通信协议 I2C(Inter-Integrated Circuit)协议是一种串口通信协议,用于在集成电路之间传输数…

阿里推出全新推理模型(因果语言模型),仅1/20参数媲美DeepSeek R1

阿里Qwen 团队正式发布了他们最新的研究成果——QwQ-32B大语言模型!这款模型不仅名字萌萌哒(QwQ),实力更是不容小觑!😎 QwQ-32B 已在 Hugging Face 和 ModelScope 开源,采用了 Apache 2.0 开源协议。大家可通过 Qwen C…

GitCode 助力 vue3-element-admin:开启中后台管理前端开发新征程

源码仓库: https://gitcode.com/youlai/vue3-element-admin 后端仓库: https://gitcode.com/youlai/youlai-boot 开源助力,开启中后台快速开发之旅 vue3-element-admin 是一款精心打造的免费开源中后台管理前端模板,它紧密贴合…

接入DeepSeek,九牧开启AI卫浴新赛道!

2025年或可被称为AI新纪元元年,“具身智能”“智能机器人”“6G”等新词语出现在《政府工作报告》里,国家对制造业转型和“人工智能”的发展提出殷切期望。 近年来,围绕数智化,制造业开启了一场全球竞赛,在无人机、高…

概率、泛化与过拟合

1. 贝叶斯定理 (Bayes Rule) 贝叶斯公式,又称贝叶斯定理、贝叶斯法则,最初是用来描述两个事件的条件概率间的关系的公式,后来被人们发现具有很深刻的实际意义和应用价值。该公式的实际内涵是,支持某项属性的事件发生得愈多&#…

基于Python实现的智能旅游推荐系统(Django)

基于Python实现的智能旅游推荐系统(Django) 开发语言:Python 数据库:MySQL所用到的知识:Django框架工具:pycharm、Navicat 系统功能实现 总体设计 系统实现 系统首页模块 统首页页面主要包括首页,旅游资讯,景点信息…

php代码审计工具-rips

代码审计 代码审计就是检查所写的代码中是否有漏洞,检查程序的源代码是否有权限从而被黑客攻击,同时也检查了书写的代码是否规范。通过自动化的审查和人工审查的方式,逐行检查源代码,发现源代码中安全缺陷所造成的漏洞&#xff0…

深入剖析分布式事务:原理、方案与实战指南

引言:为什么分布式事务成为架构师的必修课? 在微服务架构大行其道的今天,单体应用被拆分成多个独立服务。当一次业务操作需要跨多个服务/数据库完成时,传统数据库事务的ACID特性不再适用。订单创建需要同时操作订单服务和库存服务…

C语言100天练习题【记录本】

C语言经典100题(手把手 编程) 可以在哔哩哔哩找到(url:C语言经典100题(手把手 编程)_哔哩哔哩_bilibili) 已解决的天数:一,二,五,六,八&#xf…

计算机毕设-基于springboot的物业管理系统的设计与实现(附源码+lw+ppt+开题报告)

博主介绍:✌多个项目实战经验、多个大型网购商城开发经验、在某机构指导学员上千名、专注于本行业领域✌ 技术范围:Java实战项目、Python实战项目、微信小程序/安卓实战项目、爬虫大数据实战项目、Nodejs实战项目、PHP实战项目、.NET实战项目、Golang实战…

Trae IDE新建C#工程

目录 1 结论 2 项目结构 3 项目代码 1 结论 新建C#工程来说,Trae的Chat比DeepSeek的Coder好用。 2 项目结构 MyWinFormsApp/ │ ├── Program.cs ├── Form1.cs ├── Form1.Designer.cs ├── MyResources/ │ └── MyResources.resx └── MyWin…

Linux 进程管理

一.进程 1.基本介绍 在Linux中每一个执行的程序都称之为进程,每一个进程都会分配一个进程号(PID)。进程以前台和后台两种方式存在,前台进程就是我们可以在屏幕上操作的,后台进程我们无法在屏幕上看到。 程序是静态的…

最新版本TOMCAT+IntelliJ IDEA+MAVEN项目创建(JAVAWEB)

前期所需: 1.apache-tomcat-10.1.18-windows-x64(tomcat 10.1.8版本或者差不多新的版本都可以) 2.IntelliJ idea 24年版本 或更高版本 3.已经配置好MAVEN了(一定先配置MAVEN再搞TOMCAT会事半功倍很多) 如果有没配置…

fiddler everywhere 绿色永久版

目录: 1. 下载并安装 FiddlerEverywhere v5.16.02. 下载并安装 FiddlerEverywherePatcher 补丁3. 修改 FiddlerEverywhere 版本号4. 再打开 FiddlerEverywhere 即可正常使用 亲测有效!!!以 Windows 10 FiddlerEverywhere v5.16.0 …

TypeError: Cannot assign to read only property ‘xxx‘ of object ‘#<Object>‘

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…

【MySQL-数据类型】数据类型分类+数值类型+文本、二进制类型+String类型

一、数据类型分类 二、数值类型 1.bit类型 测试环境ubuntu 基本语法: bit[(M)]:位字段类型,M表示每个值的位数,范围从1~64;如果M被忽略,默认为1举例: create table testBit(id i…

python-leetcode-统计构造好字符串的方案数

2466. 统计构造好字符串的方案数 - 力扣(LeetCode) 这个问题可以用**动态规划(DP)**来解决,思路如下: 思路 1. 定义 DP 数组 设 dp[i] 表示长度为 i 的好字符串的个数。 2. 状态转移方程 我们可以在 dp…

Java为什么是跨平台的

一、Java虚拟机(JVM)的抽象层作用 JVAM是Java跨平台的核心技术。Java代码编译后生成字节码(.class文件),这些字节码并非直接由操作系统执行,而是由JVM解释或编译为特定平台的机器码。 屏蔽底层差异:JVM为不同操作系统提供统一的运行时环境,开…

RuleOS:区块链开发的“破局者”,开启Web3新纪元

RuleOS:区块链开发的“破冰船”,驶向Web3的星辰大海 在区块链技术的浩瀚宇宙中,一群勇敢的探索者正驾驶着一艘名为RuleOS的“破冰船”,冲破传统开发的冰层,驶向Web3的星辰大海。这艘船,正以一种前所未有的姿…