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

最新推荐文章于 2024-06-03 15:34:02 发布
最新推荐文章于 2024-06-03 15:34:02 发布
阅读量2.6k 收藏 7
点赞数 2
分类专栏： 随笔 文章标签： vue.js webpack npm node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DoLi_JIN/article/details/109405458
版权

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

先上效果图

第一套启动环境

第一套部署环境

第二套启动环境

第二套部署环境

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

现在开始进行文件配置

插件安装

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

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

</
最低0.47元/天 解锁文章
防己_DoLi
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue项目打包之开发环境和部署环境的实现
11-21
项目开发阶段和生产环境可能不一样 如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，API 返回的也都是假数据，等后台接口开发好后，再切换成后台提供的接口，等测试没有问题，服务端上线后，又要改成正式的接口 手动改动接口，既繁琐又容易出错（当然，区别还不止这些） 优雅的解决方案是，分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包 具体来说，分为下面几个步骤 1、创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js 中代码分别拷贝到这两个文件中，并删除 main.js 2、配置打包时的入口文件 项目根目录下新建
详解vue 不同环境配置不同的打包命令
10-17
主要介绍了详解vue不同环境配置不同的打包命令，主要包括正式环境、测试环境和开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目多环境打包
qq_20399063的博客
08-11 372
1、package.json文件 "scripts": { "serve": "vue-cli-service serve", "test": "vue-cli-service build --mode test", "prod": "vue-cli-service build --mode production", "release": "vue-cli-service build --mode release", "build": "vue-cli-ser
vue-cl-service不同环境运行/build配置
最新发布
毅香雪海的博客
06-03 1017
vue-cl-service不同环境运行/build配置
vue3.x 一套代码打包多环境多项目
老君的博客
11-08 2144
一套代码打包多环境多项目需求多环境打包实现多环境打包实现 版本号： 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 451
前期在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 6670
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 782
假设：项目有多个环境，如正式环境、测试环境、第三方。问： 部署多台服务器，要求请求接口不同，如何做到同用一份代码，去做标识区分呢？手把手-带你操劳起来#【已安装-直接忽略】安装。因为在window和mac下用到命令是不同的。这里要用到vue-cli-service，这个是解决不同系统之前的命令兼容问题。
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
详解vue-cli3多环境打包配置
10-17
Vue CLI 3 是 Vue.js 官方提供的一个脚手架工具，用于快速搭建 Vue.js 应用。在实际开发中，我们通常...通过理解和掌握 Vue CLI 3 的多环境打包配置，我们可以更加灵活地管理项目，确保代码在不同环境下的正确运行。
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
10-16
在实际开发过程中，我们经常需要针对不同的部署环境（如开发、测试和生产）进行配置和打包。Vue 提供了一种方法来实现分环境打包，使得我们可以为每个环境定制不同的配置，而无需手动更改代码。以下是如何在 Vue ...
vue3+vite配置多环境打包
weixin_41013537的博客
01-11 3514
做项目的时候，会遇到一个项目打包到多个环境的问题，只是一些微小的改动，比如说标题不一样之类的，我们就可以通过打包命令来实现，而不需要重新拉分支
cross-env 多项目环境配置
qq_43977829的博客
04-21 1986
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 950
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 569
一、单个项目多环境配置 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 186
vue多环境启动打包命令的实现 只需要以上几个步骤即可：配置几个.env文件
package.json中scripts配置环境变量区分开发环境和生产环境
bamboozjy的博客
11-23 6427
有时候打包时要区分打生产环境的包还是开发环境的包,这样判断需要用哪个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 296
*背景：**一套代码包含了PC和手机端两套代码，两端代码是独立的vue-cli项目，要分别打包后放入同一个生产目录publish中。其中PC端打包输出的代码放在publish根目录，手机端放在publish/phone目录中。**缺陷：**每次修改代码都需要打包两次，打包完后还需要手动复制进生产目录。**优化：**将两个打包过程一体化，做到输入一个指令就能将PC和手机代码都打包并放进相应的生产目录。
vue 打包镜像，根据不同的环境配置域名
07-16
在Vue项目中，可以通过配置不同的环境变量来根据不同的环境配置域名。这样在打包时，可以根据不同的环境自动切换域名。 首先，在Vue项目的根目录下，找到`config`文件夹，里面有一个`index.js`文件，这是项目的配置文件。 在`index.js`文件中，可以找到`module.exports`对象，里面定义了一些配置项。我们需要添加一个新的配置项来设置不同环境下的域名。 以下是一个示例： ```javascript module.exports = { // ... production: { // 生产环境配置 domain: 'www.example.com' }, development: { // 开发环境配置 domain: 'dev.example.com' }, // ... } ``` 在上面的示例中，我们添加了两个配置项，分别是`production`和`development`。你可以根据需要添加更多的配置项，比如测试环境等。 接下来，在你的代码中，可以通过访问`process.env`来获取当前环境的配置。例如，你可以在API请求中使用这个配置项： ```javascript const apiDomain = process.env.NODE_ENV === 'production' ? process.env.production.domain : process.env.development.domain; axios.get(`http://${apiDomain}/api/data`) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); ``` 在上面的示例中，我们通过判断`process.env.NODE_ENV`的值来确定当前的环境，然后根据不同的环境获取对应的域名配置。 最后，在打包时，可以使用不同的环境变量来指定要打包的环境。比如，你可以使用以下命令来打包生产环境的代码： ```shell NODE_ENV=production npm run build ``` 这样就可以根据不同的环境配置域名，并在打包时自动切换域名。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值