vue3+vite配置多环境打包

隔壁老王小媳妇

已于 2023-07-28 14:55:18 修改

阅读量3.7k

点赞数 1

文章标签： javascript vue.js node.js

于 2023-01-11 14:53:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41013537/article/details/128644520

版权

文章介绍了在项目开发中如何利用cross-env工具进行多环境配置，比如企业1和企业2的不同设置，以及在package.json中定义不同环境的启动命令。通过import.meta.env.VITE_DEV_USER_ENVIRONMENT可以获取到当前环境的变量，从而实现如标题等微小差异的动态调整，避免了因为环境变化而频繁拉取代码分支。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目的时候，会遇到一个项目打包到多个环境的问题，只是一些微小的改动，比如说标题不一样之类的，我们就可以通过打包命令来实现，而不需要重新拉分支

1、安装 cross-env


npm install --save-dev cross-env

2、配置package.json文件比如说企业1 我们配置company1，企业2 我们配置company2，研发跟生产环境都配置

3、分别启动pnpm dev:company1，pnpm dev:company2,在app.vue里面打印看一下有没有取到值


console.log(import.meta.env.VITE_DEV_USER_ENVIRONMENT);

就会发现这两个打印的值不同，你可以根据这个值给每个环境配置不同的标题

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

隔壁老王小媳妇

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vite vue3进行多环境打包配置

qq_35181466的博客

07-19

6795

对此创建的vu3项目进行构建，项目分为四个环境：本地、测试、预发、生产。

Vue 3 + Vite 多项目多 dist 打包操作指南

paper_umbrella的博客

06-25

6257

vue3打包，多个子项目分开打包

参与评论您还未登录，请先登录后发表或查看评论

Vue3 + Vite 打包后外部文件路径问题解决方案

html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...

04-14

771

在 Vue3 + Vite 项目中，当你在index.html中引入外部文件（如 jQuery）并在打包后遇到路径错误时，这是因为 Vite 的打包机制与开发环境的处理方式不同。

Vue3+vite打包配置及部分打包优化~

m0_62626838的博客

08-10

6297

1、步骤一：配置base。这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。2、步骤二：可根据需要配置组件及静态资源路径别名（若配置了路径别名使用方法和typescript的类型别名一样，直接替换原路径即可）这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）3、步骤三：配置生产环境移除console.log。

vite+vue3.2项目中使用@路径，报错处理

qq_37866866的博客

10-31

2271

vite+vue3.2项目中使用@路径，报错处理

vue3 vite 多环境 打包配置

qq_43978573的博客

05-20

6171

此vu3项目使用vite进行构建，项目分为四个环境：本地、测试、预发、生产除本地环境外，每次都需要将vue项目打包，默认都是 dist文件，需要根据不同的环境生成不同的文件名。

Vue3 + Vite 打包优化及配置

qq_30379395的博客

12-01

5431

本文如果有错误和不足之处，欢迎大家在评论区指出，多多提出您宝贵的意见！github地址。

vue3+vite+qiankun+monorepo框架

08-03

vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...

vue3+vite 组件打包

04-16

3. **配置Vite**：在`vite.config.js`中配置打包选项，如入口文件、输出目录、公共路径、优化设置等。 4. **编译与打包**：运行Vite的构建命令，如`vite build`，将源代码编译为生产环境可用的静态资源。 5. **处理...

Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版

04-03

总的来说，这套"Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版"提供了一个现代化的前端开发环境，结合高效的开发工具和强大的库，使得构建后台管理系统变得更加便捷和高效。无论是对于新手...

vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本

04-02

Vite5 提供了更简单的配置，同时集成了 Rollup，使得打包过程更为高效。 TypeScript 是 JavaScript 的超集，为开发人员提供了静态类型检查、更好的代码提示和错误预防。在 Vue3 项目中使用 TypeScript，可以显著...

datav Vue3+TS+Vite版.zip

04-02

标题 "datav Vue3+TS+Vite版.zip" 暗示了这是一个基于Vue3、TypeScript（TS）和Vite构建的数据可视化项目。这个压缩包可能包含了用于开发数据展示应用的所有源代码和配置文件。让我们深入了解一下这些技术及其在项目...

vue3+vite 多个环境配置

最新发布

qq_38810813的博客

04-16

350

包括项目也会用到的上传图片功能因为上传的方法需要用其他的header类型去请求所以是单独写的请求方法按照之前的逻辑可以固定封装一个上传图片的组件现在不用拉直接用env自己定义的环境地址即可。因为公司项目需求只有dev和pro两个环境虽然我新增了3个但是只在这两个里面配置了 .env是可以配置一些公共配置的目前需求来说不需要所以我也懒得配了。然后踩了一个坑就是env的文件路径是在当前项目下不是在views内。同一套代码再也不用在不同的环境里来回切换请求地址了。在请求的地址也配置上。

vue给不同环境配置不同打包命令

dogface博客

05-27

2823

VUE给不同环境处理不同的打包命令，用环境变量去处理不同接口进行测试和发布（如开发环境、测试环境，正式环境等） 1.新建.env文件; .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.test 测试环境下的配置文件 .env.production 生产环境下的配置文件 2.环境变量配置 VITE_APP_SERVER_NAME="user" VITE_APP_SERVER_ID=1 VITE_APP_API = "ht

Vite多环境配置与打包:

2301_76662406的博客

10-06

4630

开发命令（如 npm run dev）默认使用开发模式。构建命令（如 vite build）默认使用生产模式。这两者并不冲突。在开发过程中，你通常使用开发模式，而在构建生产版本时，Vite 则使用生产模式。你的项目默认是开发环境，通常是因为没有显式指定其他环境模式。你可以通过查看 package.json、vite.config.js 和环境变量文件来确认和修改环境配置。

Vue3+vite配置

qq_19688207的博客

01-07

647

接下来我们去vite.config.js中自定义环境变量前缀及获取环境变量的配置console.log(env.VITE_APP_BASE_API) // 获取环境变量return {// 环境变量前缀,默认只会暴露VITE开头变量，定义后可暴露VUE开头变量define: {},})package.json多环境配置，这部分我们在进行配置即可"dev": "vite", // 开发环境"serve": "vite preview", // 本地预览。

使用UniApp、Vue 3和Vite实现多环境打包

AvskBug的博客

09-28

2195

我们通过配置环境变量、使用Vite进行打包，并在Vue组件中使用环境变量来实现不同环境下的API地址切换。在本文中，我们将探讨如何使用UniApp、Vue 3和Vite构建一个前端应用，并实现多环境的打包功能。我们将使用UniApp作为跨平台的开发框架，Vue 3作为主要的JavaScript框架，以及Vite作为打包工具。这将使用Vite进行打包，并根据当前环境的配置进行构建。的环境变量，它将根据不同的环境指向不同的API地址。文件中的环境变量，并将其注入到代码中。上面的代码中，我们使用了。

vue3的vite配置

weixin_52663662的博客

11-27

3416

vue3的vite配置

Vite多环境配置与打包：灵活高效的Vue开发工作流

interest_ing_的博客

04-15

4920

Vite作为一个新兴的前端构建工具，提供了快速的冷启动、即时模块热更新以及真正的按需编译，极大地提高了Vue开发效率。本文将向你展示如何在Vite中设置多环境开发和打包，包括如何配置环境变量、如何应用这些变量以及如何根据不同的环境进行项目的构建。通过这些步骤，你可以确保在开发、测试和生产等不同阶段中，你的应用都能以最佳状态运行。无论你是Vite的新手还是希望优化现有工作流的开发者，本文都将为你提供实用的指导和建议。