【Vue系列】Vue之多环境配置实现自动部署

最新推荐文章于 2024-06-21 12:19:08 发布
最新推荐文章于 2024-06-21 12:19:08 发布
阅读量1.8k 收藏 8
点赞数 8
分类专栏： 高效运维 文章标签： vue 多环境配置 自动部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012069313/article/details/124568962
版权
本文介绍了在Vue项目中实现多环境部署的两种方法：通过process.env.NODE_ENV环境变量和使用.env文件指定编译参数。详细阐述了每种方式的配置步骤，包括设置环境参数、编写判断文件和服务器环境变量设定，以及编译打包流程，帮助开发者实现开发、测试、UAT和生产环境的自动化部署。
摘要由CSDN通过智能技术生成

目录

Vue 项目在不同阶段需要部署到不同的环境，比如开发环境（dev）、测试环境（test）、UAT 环境（uat）、生产环境（prod）等，那么如何通过自动化构建工具实现在多环境下自动部署呢？以下列出两种实现方式。

一、方式一：通过 process.env.NODE_ENV 环境变量进行设置

1.定义环境参数

var BASE = {
   
  /**
   * @description api请求基础路径
   */
  API_DEV: {
   
    common: "http://192.xx.xx.xx:8890"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
奔跑吧邓邓子
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
订阅专栏
vue项目优化 一 多环境部署
weixin_44559272的博客
10-29 75
第一步： package.json文件下scripts节点对象中新增test属性。 "test": "node --max_old_space_size=6096 build/build-test.js", 第二步： 在build文件夹下复制一份build.js，重命名为build-test.js。 修改build-test.js中的参数process.env.NODE_ENV、webpackConfig、spinner。 第三步： 在build文件夹下复制一份webpack.prod.conf.js
vue项目打包之开发环境和部署环境的实现
10-15
如果能看到错误信息，那么就说明环境配置已经生效，可以根据不同环境加载正确的入口文件。 总结起来，Vue项目打包的开发环境和部署环境实现关键在于区分和管理不同环境的配置。通过创建并配置多个入口文件，我们...
VUE自动化部署
qq_36990263的博客
11-18 1066
放弃npm run build，再压缩上传这种毫无效率的操作了。 使用scp2将build之后的文件上传到生产或测试环境。 此方案本质上就是就是ssh进入服务器，scp本地文件到服务器。嘻嘻 缺点很明显，不够安全，不能回滚版本 优点就是，很简便。自行判断哦 一、安装scp2 npm install scp2 --save-dev #或 cnpm install scp2 --save-dev 二、写好测试环境和生产环境的脚本 例如测试环境 dev.js、生产环境pro.js 放项目根目录下 内容：dev.
若依RuoYi-Vue分离版—多环境配置
最新发布
qq_20236937的博客
06-21 768
若依支持通过简单的配置，切换不同的环境，如开发环境（dev），测试环境（test），生产环境（prod）等。下面看看若依提供的两种多环境配置方式。
Vue 多环境的配置
个人学习使用
06-26 4771
首先 我们得了解 什么是多环境变量，以及多环境变量的作用，下面用一句简短的话来描述环境一般分为开发环境，测试环境，生产环境作用：文件创建的位置 根目录下 开发环境 配置生产环境来到控制台 启动命令吧 下面我将演示 启动开发环境的指令 其他环境类似为了方便测试 我们来到 main.ts 文件中 输出当前的环境 你们的可能是js 不影响大局.........
vue多环境配置
LeakCollector的博客
03-23 838
vue多环境配置 正常的环境一般有development（开发环境）、production（正式环境）。打包它俩分别使用如下命令： npm run serve :打包开发环境(development)的包。 npm run build: 打包正式环境(production)的包。 那么如何打包其他环境的包呢？如下几步即可实现： 第一，在根目录下，新建其他环境对应的配置文件，例如，需要一个cte2环...
Vue多环境配置
小强崽的博客
07-17 1792
一、新建配置 # 开发环境 .env.dev # 集成测试 .env.sit # 验收测试 .env.uat # 生产环境 .env.prod .env.dev ENV = 'dev' VUE_APP_SERVER_API = 'http://localhost:8080/api/pavilion' .env.sit ENV = 'sit' VUE_APP_SERVER_API = 'http://192.168.8.246:8080/api/pavilion' .env.uat ENV = '
vue相关配置文件详解及多环境配置详细步骤
10-15
### Vue相关配置文件详解及多环境配置详细步骤 在现代前端开发中，Vue.js作为一款流行的JavaScript框架，凭借其简洁的API、响应式的数据绑定机制以及丰富的生态系统而广受好评。对于一个基于Vue构建的应用来说，...
详解vue-cli3多环境打包配置
10-17
只需更改运行的脚本命令，Vue CLI 3 会自动处理相应的环境配置。 总结一下，Vue CLI 3 的多环境打包配置主要包括以下步骤： 1. 安装 Vue CLI 3。 2. 创建 `.env` 文件，如 `.env.development`, `.env.test`, `.env...
vue环境配置和项目简单的部署以及修改
07-05
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂...
Vue-CLI 4.x 自动部署项目至服务器
04-01
使用 scp2+cross-env 自动化上传部署 scp2是一个基于ssh2增强实现，纯粹使用JavaScript编写。 而ssh2就是一个使用nodejs对于SSH2的模拟实现。scp，是secure copy的缩写, scp是Linux系统下基于SSH登陆进行安全的远程文件拷贝命令。这里我们就用这个功能，在Vue编译构建成功之后，将项目推送至测试/生产环境，以方便测试，提高效率。
vue配置多环境
pscool的博客
06-02 793
启动开发环境，打印如下。
Vue项目多环境配置
江黎
10-06 314
新建2个配置文件 内容 在package.json中进行区分 测试
vue自动化部署
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
01-27 461
一、安装scp2 npm install scp2 --save-dev 二、根目录创建upload.js，和package.json平级 upload.js简化版 'use strict' // 引入scp2 var client = require('scp2'); client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX', // ...
vue多环境配置方案
高先生的猫
08-13 1405
一般服务器分为本地环境，测试环境，正式环境，如果每次都要修改配置就很麻烦，总结一下我使用的方法 vue-demo/ |-build/ |-config/ |-dist/ |-src/ |-config/ |-index.js |-dev.conf.js |-sit.conf.js |-prod.conf.js |-package.json |-index.html 修改执行命令 修改pack
vue配置多环境方案
ZT_KEBEI的博客
09-13 532
vue配置多环境方案，开发环境下配置跨域代理，测试环境与生产环境打包。
vue2配置部署多环境变量
05-17
在Vue2中，可以通过配置不同的环境变量来实现在不同的环境中使用不同的配置。以下是一些配置多环境变量的步骤： 1. 在根目录下创建.env文件，分别创建.env.development、.env.test、.env.production等文件，用于存储对应环境的配置。 2. 在这些文件中配置对应的环境变量，例如： ``` // .env.development NODE_ENV = 'development' API_BASE_URL = 'http://localhost:3000' ``` ``` // .env.test NODE_ENV = 'test' API_BASE_URL = 'http://test.api.com' ``` ``` // .env.production NODE_ENV = 'production' API_BASE_URL = 'http://prod.api.com' ``` 3. 在vue.config.js文件中，使用webpack的DefinePlugin插件将环境变量注入到Vue应用中。例如： ``` const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV), API_BASE_URL: JSON.stringify(process.env.API_BASE_URL) } }) ] } } ``` 4. 在Vue应用中，可以通过process.env访问环境变量的值。例如： ``` axios.defaults.baseURL = process.env.API_BASE_URL ``` 这样，在不同的环境中，Vue应用会自动加载对应的环境变量配置，从而达到多环境部署的目的。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奔跑吧邓邓子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值