不同vue版本下如何分环境打包（vue多环境打包如何实现）
ztj100 2025-06-13 18:10 5 浏览 0 评论
前言
假如你的Vue项目需要在多个服务器部署，若使用代理的模式，每个环境都需要先改IP地址及端口，再打包，非常的麻烦
vue2版本（基于webpack）的动态ip及端口分环境打包
- 在public目录下，新建config.js文件
- 在config.js文件中编写对应的分别打包环境
- 把config.js在index.html中引入
- 创建对应的 .env.dev ， .env.sit ， .env.prod 三个环境
在每个环境中写入对应的环境变量
- 处理package.json中的scripts的打包入口
- 最后，修改所需要动态ip及端口的地方
如封装的request请求等
// 创建axios实例对象， 添加全局配置
const service = axios.create({
baseURL: window.basic[process.env.NODE_ENV].base + '/'
})
在vue2中，process.env.NODE_ENV拿到的就是对应的环境变量
window.basic获取到的就是对应的全局参数
vue2版本（基于webpack）的分环境打包
如上差别不大，不过在 .env.dev ， .env.sit ， .env.prod 这三个环境中，分别写入对应的环境，就不用动态的去引入ip和端口号了。
并且，在需要用到的地方，也不用去区分，直接全局引用就可以了
vue3版本（基于vite）的动态ip及端口分环境打包
跟vue2差别不大，先写config.js文件，然后在index.html中引用。
但这里需要注意的是，vue3中，需要使用VITE_APP_xx （xx可随意填写变量名）
如：
NODE_ENV = demo
VITE_APP_ENV = 'dev'
但是在vue3中，使用这个变量，就不是跟vue2一样，使用process.env.xxx了
而是使用
import.meta.env.VITE_APP_ENV这种写法
如：
const baseURL: string = window.basic[import.meta.env.VITE_APP_ENV as any].base + '/' ?? ''
vue3版本（基于vite）的分环境打包
这个就是vue2版本的分环境打包和变量使用注意一下
在typescript里，需要去处理一下window对象，以及找不到meta对象和env对象
在tsconfig.json里，找到types，在里面添加"vite/client"
最后
公众号：小何成长，佛系更文，都是自己曾经踩过的坑或者是学到的东西
有兴趣的小伙伴欢迎关注我哦，我是：何小玍。大家一起进步鸭
相关推荐
- 13个python常用库，提高你的开发能力
-
Python拥有大量封装好的功能模块和工具库，这些库广泛应用于数据分析、机器学习、Web开发、自动化等多个领域。库在Python的作用非常重要，利用库不仅能简化复杂的任务还能极大减少开发的时间。下面介...
- TensorFlow中logits的含义解析（tensorflow2 lstm）
-
技术背景在机器学习尤其是深度学习领域，...
- Python TensorFlow机器学习模型构建指南
-
以下是一篇关于使用Python和TensorFlow构建机器学习模型的详细指南，结合代码示例和关键概念解释：探索TensorFlow：构建强大的机器学习模型TensorFlow是由Goo...
- TensorFlow和Pytorch中的音频增强
-
对于图像相关的任务，对图像进行旋转、模糊或调整大小是常见的数据增强的方法。因为图像的自身属性与其他数据类型数据增强相比，图像的数据增强是非常直观的，我们只需要查看图像就可以看到特定图像是如何转换的，...
- 使用TensorFlow进行深度学习模型训练
-
深度学习是一种机器学习的子领域，它通过模拟人脑神经网络的结构和运作方式，从而实现在大规模数据上进行复杂任务的训练和预测。TensorFlow是由Google开发的一款开源的深度学习框架，它为我们...
- Keras各种Callbacks介绍（keras中backend常用）
-
1前言在tensorflow.keras中，callbacks能在fit、...
- 实例解析神经网络的工作原理（神经网络具体实例）
-
来源：算法进阶...
- 在浏览器中进行深度学习:TensorFlow.js (五)构建一个神经网络
-
这一次我们终于可以开始真正的深度学习了，从一个神经网络开始。神经网络（NeuralNetwork）是深度学习的基础，基本概念包括：神经元，层，反向传播等等。如果细讲我估计没有五到十篇文章那是讲不完的...
- TensorFlow和Keras入门必读教程（tensorflow_core.keras）
-
导读：本文对TensorFlow的框架和基本示例进行简要介绍。作者：本杰明·普朗什（BenjaminPlanche）艾略特·安德烈斯（EliotAndres）来源：华章科技01TensorFlo...
- Transformer系列:残差连接原理详细解析和代码论证
-
关键词：...
- 详解SoftMax多分类器（多分类svm代码）
-
常见的逻辑回归、SVM等常用于解决二分类问题，对于多个选项的分类问题，比如识别手写数字，它就需要10个分类，同样也可以用逻辑回归或SVM（只是需要多个二分类来组成多分类）。对于多分类的实现，我们还可以...
- 如何使用 TensorFlow 构建机器学习模型
-
在这篇文章中，我将逐步讲解如何使用TensorFlow创建一个简单的机器学习模型。TensorFlow是一个由谷歌开发的库，并在2015年开源，它能使构建和训练机器学习模型变得简单。...
- 芋道 ruoyi-vue-pro 踩的那些坑—前端编译打包问题
-
1、芋道ruoyi-vue-pro前端没有README.md，是可以理解，毕竟他们是以文档来创收的。但是对于非专业的前端人员非常的不友好。坑是一个接一个，很崩溃。我看项目有有个yarn.lock，...
- Nginx部署Vue项目以及解决刷新页面404
-
在部署vue、react的前端项目时，经常会出现404的问题，一般是文件不是真正的存在，所以Nginx报404的错误一、打包项目1.在项目中的package.json上右键，点击Shownpm...
- vue3管理后台，打包方便体积小，访问速度快，代码规整可读性强
-
项目介绍增强型vue3管理后台，打包方便体积小，访问速度快，代码规整可读性强。项目特点首页...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 13个python常用库，提高你的开发能力
- TensorFlow中logits的含义解析（tensorflow2 lstm）
- Python TensorFlow机器学习模型构建指南
- TensorFlow和Pytorch中的音频增强
- 使用TensorFlow进行深度学习模型训练
- Keras各种Callbacks介绍（keras中backend常用）
- 实例解析神经网络的工作原理（神经网络具体实例）
- 在浏览器中进行深度学习:TensorFlow.js (五)构建一个神经网络
- TensorFlow和Keras入门必读教程（tensorflow_core.keras）
- Transformer系列:残差连接原理详细解析和代码论证
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)