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

相关推荐
荔枝吖17 分钟前
项目中会出现的css样式
前端·css·html
Dontla20 分钟前
何时需要import css文件?怎么知道需要导入哪些css文件?为什么webpack不提示CSS导入?(导入css导入规则、css导入规范)
前端·css·webpack
小堃学编程36 分钟前
前端学习(2)—— CSS详解与使用
前端·css·学习
蓝婷儿1 小时前
第一章:HTML基石·现实的骨架
前端·html
Watermelo6171 小时前
前端如何应对精确数字运算?用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性
开发语言·前端·javascript·vue.js·前端框架·vue·es6
HebyH_1 小时前
2025前端面试遇到的问题(vue+uniapp+js+css)
前端·javascript·vue.js·面试·uni-app
Clockwiseee1 小时前
CSRF记录
前端·csrf
深圳卢先生1 小时前
XSS 和 CSRF 有什么区别?Java Web 如何防御?
前端·xss·csrf
EndingCoder3 小时前
2025年JavaScript性能优化全攻略
开发语言·javascript·性能优化
qq_386322694 小时前
华为网路设备学习-21 IGP路由专题-路由过滤(filter-policy)
前端·网络·学习