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就可以了

相关推荐
qczg_wxg1 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz3 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码3 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v3 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山3 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin4 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip4 小时前
结合Worker通知应用更新
前端·javascript
叶玳言4 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳4 小时前
HTML 基本结构
前端
Gazer_S4 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js