vue项目不同环境配置——同时打包和启动多套环境(手把手 包教包会)

最新推荐文章于 2023-10-27 13:36:02 发布
最新推荐文章于 2023-10-27 13:36:02 发布
阅读量2.7k 收藏 7
点赞数 2
分类专栏： 随笔 文章标签： vue.js webpack npm node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DoLi_JIN/article/details/109405458
版权
本文介绍了如何在Vue项目中配置多套环境，包括开发、测试和生产环境，详细讲解了插件安装、文件配置等步骤，并提供了GitHub仓库链接，帮助开发者轻松实现环境切换。
摘要由CSDN通过智能技术生成

测试环境、本地环境、正式环境、阶段性提交环境同时并存，是否已经厌烦了这种每次需要改代码的配置和地址方式？

先上效果图

第一套启动环境

第一套部署环境

第二套启动环境

第二套部署环境

ok，到现在，你应该知道我说的是什么，最后的配置效果是什么了。

现在开始进行文件配置

插件安装

配置使用了cross-env插件，所以，先安装此插件

npm install --save-dev cross-env
或者cnpm 安装
cnpm install --save-dev cross-env

</
最低0.47元/天 解锁文章
防己_DoLi
关注
专栏目录
vue项目中进行多环境配置
cyj0919的博客
08-19 475
在Vue 项目中，进行多环境配置是一个常见需求，主要用于区分开发、测试、生产等不同环境下的API地址、密钥等配置。
vue项目打包之开发环境和部署环境的实现
11-21
项目开发阶段和生产环境可能不一样 如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，API 返回的也都是假数据，等后台接口开发好后，再切换成后台提供的接口，等测试没有问题，服务端上线后，又要改成正式的接口 手动改动接口，既繁琐又容易出错（当然，区别还不止这些） 优雅的解决方案是，分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包 具体来说，分为下面几个步骤 1、创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js 中代码分别拷贝到这两个文件中，并删除 main.js 2、配置打包时的入口文件 项目根目录下新建
vue3.x 一套代码打包多环境多项目
老君的博客
11-08 2277
一套代码打包多环境多项目需求多环境打包实现多环境打包实现 版本号： vue/cli：4.5.12 node：v14.15.3 npm：6.14.9 需求 代码多环境打包很常见，直接说说多项目打包： 多项目打包就是一套代码，只有logo，部分样式，标题等不同。 如果分好几套代码，后期改需求总不能每套代码都改一遍，所以就需要多项目打包。 （当然，如果后期项目差异过大时，还是强烈建议把项目区分开来） 多环境打包实现 在package.json的scripts下push以下代码 "dev": "vue-cl
vue 打包项目在多个环境部署
最新发布
qq_28278833的博客
10-27 567
前期在Linux服务器部署了测试环境，现在需要在服务器上部署生成环境，在部署的时候使用Nginx做代理，前端资源出现无法加载的情况，查看网上资料，发现部署同一台服务器要分环境进行打包。4、router.js中添加base。测试环境：npm run build:stage。生成环境：npm run build:prod。3、packing.json中配置。2、vue.config.js中配置。本地运行：npm run dev。
vue配置多个运行环境、打包环境，通过运行指令切换环境，通过切换环境控制对应环境的参数
mrliucx的博客
04-29 6993
01.配置环境 1.创建开发环境、测试环境、生产环境文件 2.给文件配置接口基础API，添加对应环境的所需参数，以生产环境为例 02.静态参数值跟随环境变化 1.环境配置文件中添加了两个参数（代理、websocket） #开发环境nginx代理路径 VUE_APP_BASE_URL = 'manage-web-dev' #开发环境websocket VUE_APP_WEBSOCKET = '192.168.xx.xx:8080' 2.添加的环境参数为VUE_APP_BASE_URL、VUE_APP_
vue-cli配置多环境打包，以及启动项目
qq_24937505的专栏
09-19 821
假设：项目有多个环境，如正式环境、测试环境、第三方。问： 部署多台服务器，要求请求接口不同，如何做到同用一份代码，去做标识区分呢？手把手-带你操劳起来#【已安装-直接忽略】安装。因为在window和mac下用到命令是不同的。这里要用到vue-cli-service，这个是解决不同系统之前的命令兼容问题。
vue3+vite配置多环境打包
weixin_41013537的博客
01-11 3576
做项目的时候，会遇到一个项目打包到多个环境的问题，只是一些微小的改动，比如说标题不一样之类的，我们就可以通过打包命令来实现，而不需要重新拉分支
打造自己的博客（一）利用VuePress完成博客整体搭建，并支持评论和自动发布
余光的博客
03-23 1778
打造自己的博客（一）利用VuePress完成博客整体搭建，并支持评论和自动发布
教程 - 深度探讨在 Vue3 中引入 CesiumJS 的最佳方式
虚幻私塾
08-27 2765
目录*++++由于 Vue2 已经进入维护期，且 Vue2 对待组件内的 data 是无差别使用递归将其劫持的，对于复杂状态的对象会造成严重的 JavaScript 访问路径过长而导致的，这个应该是老生常谈了。Vue3 提供了markRaw函数，标记一个对象，令 Vue 不再将其视作数据，所以本文基于 Vue3 来介绍如何引入 CesiumJS。心急的朋友可以直接跳过本文的介绍，拉到文末，有示例工程 zip 下载。...
2-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》初识Nuxt3
DVTOP的博客
11-21 2005
Nuxt 3是基于Vite、Vue3和Nitro的Nuxt框架的全新重写，具有一流的Typescript支持，是两年多研究、社区反馈、创新和实验的结果。 Nuxt.js是基于Vue.js创建的混合渲染应用框架，一般使用Nuxt.js多是用来解决SEO的问题。
手把手教你搭建个人技术博客，半小时搞定
猿码天地
05-30 3957
一、写在前面 我是猿人，一个热爱技术、热爱编程的IT猿。技术是开源的，知识是共享的！ 写作是对自己学习的总结和记录，如果您对Java、分布式、微服务、中间件、Spring Boot、Spring Cloud等技术感兴趣，可以关注我的动态，我们一起学习，一起成长！ 用知识改变命运，让家人过上更好的生活，互联网人一家亲！ 相信很多人都想拥有一个自己的个人博客，现有的个人博客搭建框架已经有很多了，例如 hexo、vuepress、jekyll等等，这里我选用vuepress 来快速搭建个人博客。 猿人
cross-env 多项目环境配置
qq_43977829的博客
04-21 2024
package.json devDependencies下安装 cross-env（添加好要npm i） "cross-env": "^7.0.3" scripts下（注意后面这个webpack.devyuyao.conf.js，是要添加的新文件） "dev-yuyao": "cross-env VUE_APP_SSO_URL=yuyao webpack-dev-server --inline --progress --config build/webpack.devyuyao.conf.js", w
vue项目实现多环境 打包 / 运行
m0_50013804的博客
02-18 965
vue项目实现多环境 打包/运行 1. 添加配置文件 在项目中 config 文件夹中添加开发环境，测试环境，生产环境配置文件（这里配置文件建议格式【*.env.js】方便后面配置文件的读取操作） 举个测试配置环境的例子： 'use strict' module.exports = { // 测试 NODE_ENV: '"test"', API_HOST: '"http://192.168.0.130:8080/"', } 这里的 NODE_ENV 可以当作一个唯一（当前配置文件的key），API_
项目内的多环境打包。以及多个项目配置打包
灬Manong 博客
08-06 579
一、单个项目多环境配置 1.在根目录创建一下文件 .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境配置文件 development 模式用于 vue-cli-service serve .env.production 生产环境配置文件 production 模式用于以下两个script命令 vue-cli-service build vue-cli-service test:e2e .env.test
vue多环境启动打包命令的实现
weixin_51682602的博客
10-20 192
vue多环境启动打包命令的实现 只需要以上几个步骤即可：配置几个.env文件
package.json中scripts配置环境变量区分开发环境和生产环境
bamboozjy的博客
11-23 6583
有时候打包时要区分打生产环境的包还是开发环境的包,这样判断需要用哪个baseurl或者其他变量 方法1: //windows操作系统下: "builddev": "set NODE_ENV=dev&&vue-cli-service build", "buildprod": "set NODE_ENV=prod&&vue-cli-service build", //mac操作系统下: "builddev": "export NODE_ENV=dev&&am.
实现多套代码同时打包
weixin_44137800的博客
03-21 328
*背景：**一套代码包含了PC和手机端两套代码，两端代码是独立的vue-cli项目，要分别打包后放入同一个生产目录publish中。其中PC端打包输出的代码放在publish根目录，手机端放在publish/phone目录中。**缺陷：**每次修改代码都需要打包两次，打包完后还需要手动复制进生产目录。**优化：**将两个打包过程一体化，做到输入一个指令就能将PC和手机代码都打包并放进相应的生产目录。
vue多环境配置
dream12331的博客
07-02 509
https://www.cnblogs.com/sevenbreey/p/9370044.html
Vue项目配置多环境打包命令详解
本文主要介绍了如何在Vue项目中配置不同环境的打包命令，包括正式环境、测试环境和开发环境。通过以下步骤实现环境配置的差异： 1. 安装cross-env： 在Vue项目中，为了能够在不同环境中切换NODE_ENV变量，我们需要...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值