vue打包后如何区分开发、测试和生产等不同的开发环境

最新推荐文章于 2025-06-24 16:53:27 发布
原创 最新推荐文章于 2025-06-24 16:53:27 发布 · 置顶 · 2.2w 阅读 · 40 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种通过修改axios的baseURL来实现不同环境（如测试、预发布等）的打包部署方法。具体做法包括在配置文件中区分环境，并在main.js中引入全局配置文件来动态设置axios的baseURL。

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

看过vue和webpack api的同学都知道，使用npm run dev可以运行开发环境的代码，使用npm run build就是打包生产环境的代码。但是如果我还有测试环境和预发布环境，运行npm run build命令只能在生成环境也就是线上环境运行，那我的测试和预发布环境怎么打包?

参考了网上的一些文章，我觉得还是从 axios调用接口api，修改 axios的 baseURL入手比较方便。

做法：

①在config/prod.env.js文件中通过后缀名区分不同的环境，因为prod.env.js定义的常量可以在全局引用，省去了我们再定义全局变量的步骤。

②可以定义一个全局配置文件，在main.js中引用，这样每次运行程序都会首先运行这个配置文件。在这个配置文件中，引入axios，并根据当前的域名配置axios的baseURL

③配置好axios后，每次执行 npm run build命令都会根据 当前不同的环境而选用不同的域名地址。这样就可以达到只打包一次就能在不同的环境中运行了，是不是很方便呢。。。。

卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云

Vue 打包和开发参数差异的原因
CoderExtra的博客
09-30 187
综上所述，Vue 打包和开发参数的差异是为了满足不同的需求和环境。开发参数主要关注开发体验和调试能力，而打包参数则关注代码包的优化和性能。通过合理配置这些参数，我们可以在开发和生产阶段获得最佳的开发体验和性能表现。在 Vue 开发中，我们通常会使用不同的参数配置来进行开发和打包。打包参数用于在生产环境中生成优化后的代码包，以提高性能和加载速度。: 通过配置该选项，我们可以进一步优化代码包的大小和加载性能，例如使用。: 在生产环境中，我们通常使用更轻量级的源映射文件，例如。: 指定构建模式，常见的选项有。
4-4 webpack-区分开发环境和生产环境
xt_123456的博客
05-20 608
webpack-区分开发环境和生产环境 开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载或热模块替换能力和localhost server（本地服务器）。而在生产环境中，我们的目标则转向于关注更小的 bundle，以及资源的优化，以改善加载时间。所以我们通常建议为每个环境编写彼此独立的 webpack 配置。 具体步骤 1.安装 打开终端，进入项目文件夹的路径，输入安装命令为：cnpm install --save-dev webpack-merge 2.配置 (1)
webpack实现开发、测试、生产等环境的打包切换
Joy_qxz的博客
03-09 9965
        使用webpack构建的工程，在开发过程中不同环境的配置不同，在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。但是每次都手动修改会比较麻烦，本文简单介绍如何通过对webpack进行配置，实现不同环境打包分类配置；            1.修改build文件夹下build.js文件                添加声明变量                 修改前...
vue2项目中配置切换不同的环境
最新发布
maxiaoxin1314的博客
06-24 175
Vue切换不同环境变量配置问题
打包的时候区分生产环境和开发环境
qq_45903009的博客
03-17 1208
每次上线的时候都要给配置环境以及文件，有时候会忘掉，所以需要一个变量来直接区分生产环境和开发环境 第一步：环境变量的指定 //.env.development ENV = "development" VUE_APP_BASE_URL = "development" //.env.production ENV = "production" VUE_APP_BASE_URL = 'production' 第二步：VUE_APP_BASE_URL的使用（生产环境和开发环境的接口） //process.env
vue项目打包上线后页面样式与开发页面不一致
朽木自雕的博客
06-10 4190
vue项目打包上线后页面样式与开发页面不一致 原因： 打包的过程会进行优化，导致引入样式文件的顺序发生变化 解决办法： 将自己写的样式文件放在最后面，框架什么的放在前面 注意：每个组件的样式文件记得加上scoped，防止样式冲突 ...
使用ant-design-vue中，开发环境与生产环境的样式不一样
py_boy的博客
12-04 3008
今天碰到个问题，本地使用ant-design-vue开发时，本地服务器上面的所有样式都没问题，界面功能十分完美，心里美滋滋的可以划水了，立刻上传到服务器。结果服务器上面的页面样式与本地的样式不一样，心里真的mmp了。通过修改本地代码，然后消除相关loading，上传到自己服务器上，开始了漫漫f12对比样式。最后是ant-design-vue里面的样式在本地可能不存在覆盖，服务器上面有相关覆盖，这个...
vue项目打包之开发环境和部署环境的实现
10-15
总结起来，Vue项目打包的开发环境和部署环境实现关键在于区分和管理不同环境的配置。通过创建并配置多个入口文件，我们可以轻松地在开发和部署之间切换，同时避免手动修改代码导致的错误。这个过程不仅可以确保代码...
详解vue.js根据不同环境(正式、测试)打包到不同目录
10-18
Vue项目在开发和部署过程中，通常会涉及到不同环境的构建配置，以便区分开发环境、测试环境和生产环境。为了有效地管理这些环境，Vue提供了一种打包到不同目录的策略，以确保测试和正式环境的文件互相不影响，同时...
vue如何自动化打包测试环境和正式环境的dist/test文件
10-16
Vue提供了灵活的构建配置，使得我们可以方便地为不同的环境（如测试环境和生产环境）创建不同的打包配置。以下将详细介绍如何在Vue项目中实现自动化打包测试环境和正式环境的`dist/test`文件。 首先，我们需要在`...
vue项目分环境打包的具体步骤 --- 区分测试环境与线上环境的打包引用路径
m0_71902265的博客
12-05 1107
vue项目分环境打包的具体步骤 --- 区分测试环境与线上环境的打包引用路径
vue项目，如何区分开发环境、测试环境、正式环境
weixin_40466351的博客
01-19 2064
测试环境通常就是开发环境，所以设置为"build:test": “NODE_ENV=development vue-cli-service build”,serve和build有默认值。默认值development 和 production。在package.json文件中配置。
vue环境配置
weixin_67420857的博客
04-20 594
注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。在项目的根目录下创建 .env.development 和 .env.production 和 .env.test 几个文件。.env.production 正式线上环境，或者叫生产环境。一种是测试环境，就是测试人员使用的服务环境。一种是生产环境，就是要发布到线上的环境。一种是开发环境，就是本地开发时的环境，.env.development 开发环境。
使用webpack根据不同的环境打包
HQ DevJ的专栏
06-02 1542
使用webpack根据不同的环境打包前提准备工作工作目录结构编写common.jsdev.js,tenv.js,prod.js进行打包配置 前提 我们在进行项目开发的时候，一般在不同的环境下面使用不同的代码分支，常见的有dev-开发分支、test-测试分支、uat-准生产分支、prod-生产分支，生产分支和准生产分支基本上是一样的。dev分支一般作为本地的开发分支使用，连接相关的ip进行相关调试的代码本地联调，测试环境就是对接的测试环境的ip或者域名进行测试联调，生产分支作为线上分支使用，供外部使用。 但是
vue项目环境快速切换
郝南过的博客
11-16 3746
vue切换环境配置
vue正式环境和测试环境切换
Aislli的博客
05-18 7135
目的： 根据不同的启动命令应用对应环境的域名及其它变量值 创建配置文件： 在项目根目录下创建这四个文件，作用及含义分别为： .env：公用配置文件，不管在哪个环境启动的项目，都会使用这个文件里面的变量，下面三个文件里和此文件同名的变量会覆盖.env里的变量，不同名就合并，也就是说.env里的同名变量优先级更低； .env.development：开发环境，默认不指定任何环境启动时就使用这个文件里的变量； .env.staging：测试环境，在 package.json 启动命令后加 --mode stag
vue项目(vue-cli)配置环境变量和打包时区分开发、测试、生产环境
黎小小的博客
02-14 4370
NODE_ENV 设置为 "test"，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。在自定义配置Vue-cli 的过程中，想分别通过.env.development .env.test .env.production 来代表开发、测试、生产环境。3、NODE_ENV=“someone”，环境变量随便给一个值，它会默认为NODE_ENV=“development” 的打包策略。
vue打包环境配置
xiaomingzi_12345的博客
06-29 3278
注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。步骤一：手动创建 文件 .env.development 和.env.production和.env.test几个文件。.env.production如下：（正式线上环境，或者叫生产环境）步骤三:在axios封装中使用环境配置项（api.js中）.env.development如下：（开发环境）.env.test（测试环境）
spring boot 打包，测试包和正式包
yanweijie0317的专栏
03-23 831
早几年，在外包公司，区分测试环境、正式环境，后来还弄个准生产环境。于是就有个问题，配置文件从测试环境上到准生产环境，要改一遍。从准生产环境上到正式环境，又要改一遍。当时觉得就这么习以为常。 现在项目（spring mvc+spring），其实除了应用程序部署，是区分测试环境和正式环境的，其他的数据库、缓存服务器等等都是公用的。 不过，配置文件是分开测试和正式的，那怎么对应测试环境就加载测试的配置文件，正式环境就加载正式环境的配置文件？？？？？？？ 1. spring配置文件 <beans pr
vue开发环境生产环境测试环境打包
03-14
"build:dev": "vue-cli-service build --mode development", // 开发环境构建 "build:test": "vue-cli-service build --mode test", // 测试环境构建 "build:prod": "vue-cli-service build --mode production" /...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值