vue项目分环境配置打包处理

置顶 已于 2023-07-24 14:23:55 修改
阅读量1.6k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： vue项目非常实用的功能整理 Vue vue后台系统管理项目全套功能 文章标签： vue.js 前端 javascript
于 2022-11-26 16:58:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/128051348
本文介绍了Vue项目如何进行本地、测试和生产环境的配置，包括.env文件的使用、环境变量定义以及打包处理。在vue.config.js中详细配置了代理、多地址、模块重命名、gzip压缩等，确保打包过程顺利且优化项目性能。同时，文章还提到了前端跨域解决方案和移动端适配设置。

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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue一键打不同环境的包
myy2012的专栏
08-22 803
outputDir 是打包后输出的目录;也可按照其他方式命名，每个环境不一样即可。终端执行：npm run build:all。
vue实现分环境进行打包
weixin_43898997的博客
03-08 3863
vue+webpack分环境进行打包
vue分环境打包
博客
04-22 1569
      在项目开发中，我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个，之前每次要发布测试版或Pre版都是修改了源码中API地址后打包，这样很麻烦。如果能根据不同环境打包就完美了。 代码如下： 1.config/prod.env.js文件修改如下： 'use stri...
Vue项目分环境(开发/测试/生产环境)打包
wolf艺术人生
11-08 6333
原先是自己学习怎么配置分环境打包，最后还是觉得记录一下，顺便回顾一下，如果能帮助到其他童鞋更好。 本文建立在Vue环境安装配置好，通过Vue init 创建好一个项目的前提下。希望能有帮助，有错误麻烦指出。（勿喷，学习中，谢谢！） 一、安装cross-env 1、什么是cross-env? 通过js在项目工程设置不同环境变量的工具。 2、安装 npm install cross-env 二、设置不...
vue 打包_前端Vue项目自动区分环境打包
weixin_39918084的博客
11-25 227
​​新项目开始很长时间了，对于前端Vue项目一直没管理。随着问题的增多，再有就是自动化运维的需要。急迫需要调整下几个Vue项目的多环境自动打包问题。版本vue/cli-service: ^3.5.3基于这个版本，原生支持development、production，但是我们要求要有test，于是就开始了改造，其实比我想象的要简单，主要一下几个地方。项目根目录下增加环境文件.env.developm...
vue实现分环境打包
eqizhihui的博客
08-22 270
创建环境变量的文件，若自定义文件名，则若想配置文件生效，就需要在package.json文件修改，若不想修改package.json文件，则开发环境需要严格命名为.env.development，生产环境严格命名为.env.production，就会覆盖默认情况的配置。测试，配置有环境变量的情况下，会将新配置的和默认配置的合并在一起。
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
Vue 项目分环境打包的方法示例
10-18
通过上述方法，我们可以为Vue.js项目设置多环境配置，并且方便地根据不同环境进行打包。这样，开发、测试和生产环境可以各取所需，互不干扰，保证了项目的高效和稳定运行。本文介绍的方法简单易行，适合在日常开发中...
Vue项目分环境打包的实现步骤
08-27
Vue项目的分环境打包是开发过程中不可或缺的一环，它允许我们根据不同的部署环境（如开发、测试、预发布和生产）创建针对性的构建。Vue CLI工具虽然默认提供了开发（dev）和生产（prod）两种环境，但往往需要针对更...
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
10-16
Vue 提供了一种方法来实现分环境打包，使得我们可以为每个环境定制不同的配置，而无需手动更改代码。以下是如何在 Vue 项目中实现这一功能的详细步骤： 1. **环境变量配置**： - 在 `config` 文件夹内，创建一个新...
vue项目配置不同环境打包指令（vue-cli2、vue-cli3项目）
xilejie的博客
04-11 4686
根据指令打包不同环境的dist包。
vue之分环境打包项目
weixin_43845137的博客
03-10 508
目录vue之分环境打包项目设置环境变量配置脚本指令 package.json打包项目 并且 校验当前环境的请求路径 vue之分环境打包项目 再正常的开发之中，一般来说有着，本地开发环境、测试环境、预发布环境、生产环境 这样的话，给vue项目配置一些环境变量，用于打包时候，区分不同的环境 设置环境变量 再项目跟目录下创建以下环境 本地开发环境 # just a flag ENV = 'development' # base api 本地开发环境 的基础路径 VUE_APP_BASE_API =
vue项目分环境打包(详细说明)
ZhangYuan2HH的博客
10-25 4379
vue实现分环境打包步骤（超详细） 作者：张元 815607354@qq.com 第1步：安装cross-env 在项目目录下运行如下命令安装cross-env npm i --save-dev cross-env 安装成功或原本项目就有可以查看node_modules目录有cross-env插件 第2步：修改config目录下ENV文件参数 以我的项目为例（de...
vue 分环境打包配置
Mr_wuying的博客
11-09 378
在config下新建 test.env.js 文件 在prod.env.js 文件中改成 // 改成你的环境域名就行 正式和测试的 'use strict' const target = process.env.npm_lifecycle_event; if (target == 'test') { //测试 var obj = { NODE_ENV: '"produc...
vue 区分多环境打包
细节怪的博客
05-20 833
区分不同的环境（测试、正式环境）
vue之打包配置环境
阿狸演绎的博客
10-19 1075
在packjson.js里使用 —mode 重新定义打包的配置文件保证evn.xxxh 这个一定要和packjson.js 里的 --mode xxxh 对应上而serve:xxxh 一定要和运行命令的 npm run serve:xxxh 对上使用如下.evn.xxxhpackjson里"serve": "vue-cli-service serve", // 默认调用 env.dev。
vue 分环境打包
rhcjqmm666的博客
12-01 2316
vue 分环境打包
Vue.js 分环境打包
cai454692590的博客
05-19 665
vue项目目录结构： 上面截图可以看出，我这里已经做了7个不同的环境配置 涉及文件： 【配置打包命令】 package.json 【配置打包后的文件路径和自定义环境变量】 /build/build.js或 /build/build_xxx.js /build/utils.js /build/webpack.base.conf.js或 /build/webpack.xxx.conf.js 【自定义环境变量】 /build/build.js ...
vue2项目分环境配置打包处理
最新发布
03-25
<think>嗯，用户问的是如何在Vue2项目中配置多环境打包，涉及webpack和process.env。首先，我需要回忆一下Vue2的环境变量配置方法。Vue CLI使用的是webpack，所以环境变量主要通过.env文件来管理。用户可能知道基础的环境变量，比如.env.development和.env.production，但可能需要多环境，比如测试环境、预发布环境等。 我记得在Vue2中，只有以VUE_APP_开头的变量才会被嵌入到客户端包中，这是需要注意的地方。然后，process.env.NODE_ENV是根据模式自动设置的，比如development、production。用户可能需要自定义变量，比如VUE_APP_API_URL，不同环境对应不同的API地址。 接下来，可能需要创建不同的.env文件，比如.env.staging，然后在package.json里配置对应的打包命令，比如--mode staging。这样运行npm run build:staging时，就会使用.env.staging文件中的变量。 用户可能还会遇到问题，比如变量没有被正确加载，或者在代码中访问的方式不对。需要提醒他们检查变量前缀是否正确，以及是否重启了服务。另外，环境变量在构建时被静态替换，所以修改后需要重新构建。 可能还需要提到webpack配置的修改，比如如果用户需要更复杂的处理，可以在vue.config.js里使用DefinePlugin来设置全局变量。不过通常.env文件已经足够，但高级情况下可能需要这样做。 另外，参考的引用[1]提到了process.env.NODE_ENV和VUE_APP_ENV的使用注意事项，需要确认用户是否了解不同模式下的默认行为，比如production模式会启用优化，而development模式会有源映射等。 用户的问题可能还涉及到如何在不同环境中切换配置，比如Axios的baseURL根据环境变化。这时候就可以使用process.env.VUE_APP_API_URL来动态设置。 总结步骤应该是：创建.env文件，设置变量，配置打包命令，代码中使用变量，处理注意事项。同时，生成相关问题可以帮助用户深入理解，比如如何创建自定义模式，环境变量未生效怎么办，如何结合CI/CD使用等。</think>在Vue2项目中实现多环境配置打包，主要通过webpack的环境变量管理实现。以下是具体配置步骤和注意事项： ### 一、环境文件配置 1. 在项目根目录创建环境文件： - `.env.development` 开发环境 - `.env.production` 生产环境 - `.env.staging` 预发布环境（自定义） 2. 文件内容示例： ```bash # .env.staging NODE_ENV=production VUE_APP_ENV=staging VUE_APP_API_URL=https://api.staging.example.com ``` ### 二、package.json配置 ```json { "scripts": { "build:prod": "vue-cli-service build --mode production", "build:staging": "vue-cli-service build --mode staging", "serve": "vue-cli-service serve --mode development" } } ``` ### 三、代码中访问变量 ```javascript // axios配置示例 const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL }); // 环境判断 if (process.env.NODE_ENV === 'development') { console.log('开发模式'); } ``` ### 四、注意事项 1. 只有以`VUE_APP_`开头的变量会被webpack嵌入客户端包[^1] 2. `NODE_ENV`会自动根据构建模式设置： - 开发模式：`development` - 构建模式：`production` 3. 修改环境文件后需要重启服务 4. 敏感变量应存放在服务器端，不要打包到前端代码 ### 五、高级配置（vue.config.js） ```javascript module.exports = { chainWebpack: config => { config.plugin('define').tap(args => { args[0]['process.env'].CUSTOM_VAR = JSON.stringify('value'); return args; }); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

船长在船上

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

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

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

打赏作者

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

抵扣说明：

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

余额充值