关键词：
现实中的问题：有时候版本上线的时候，打包时忘记切换环境，将测试包推上正式服务器，那你就会被批了。
期望：在写打包的命令行的时候就觉得自己在打包正式版本，避免推包时候的，不确信自己的包是否正确。
既然有了期望，那么就要开始百度如何去实现呢。
下面先开始介绍ant design的方法：
ant design的打包工具是roadhog，那么从roadhog下手。
在roadhog文档中，发现define的配置可以传递给代码。
在ant design pro的issue中搜索中，发现环境变量的配置。
我这也不啰嗦了，直接贴代码了
那么介绍完ant disign的，开始介绍vue的吧
首先介绍下用的包吧，cross-env是为了解决跨平台的包，可以是命令行在window和mac上都可以使用。
第一步：
npm i --save-dev cross-env
第二步：
在根目录下的config下：新建一个test.env.js文件，对标已存在的prod.env.js的文件
‘use strict‘ module.exports = NODE_ENV: ‘"test"‘
在同级目录下的index.js中
红色框的是新加的，在build对象中同样加入这两行代码，为了让在本地开发也可以切换正式测试的环境。
第三步
在根目录build文件夹下的的webpackage.prod.conf.js和webpackage.dev.conf.js文件中，获取刚才配置的test.env.js和prod.env.js
具体操作如下：
// const env = require(‘../config/prod.env‘) 注释这行原本的代码 const env = config.build[process.env.env_config+‘Env‘] // 新加这行获取js的代码
new webpack.DefinePlugin( ‘process.env‘: env // 将获取的js，放入process.env ),
同级目录下build.js
// 注释掉这行代码 // process.env.NODE_ENV = ‘production‘
// 修改spinner的定义 // const spinner = ora(‘building for production...‘) var spinner = ora(‘building for ‘ + process.env.NODE_ENV + ‘ of ‘ + process.env.env_config+ ‘ mode...‘ )
第四步：
设置打包命令行和起本地服务的命令行
"dev:test": "cross-env NODE_ENV=development env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev:prod": "cross-env NODE_ENV=development env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
第五部
在代码获取值
console.log(process.env);
以上就介绍完自动分环境打包
vue2+webpack怎样分环境打包
参考技术A用webpack打包vue根据需要设置项目的信息，也可以一路回车，使用默认信息，默认项目名称为文件夹名（项目名称不要设置成某个模块名，否则将来你引用摸个模块的时候会报错）name:(new)version:(1.0.0)description:entrypoint:(ind... 查看详情
vue-cli4.5搭建（vue3+typescript+antdesign2）环境及vscode代码自动格式化配置(代码片段)
一开始是准备用vite的，但总是出不来，案例也比较少，感觉还不成熟，暂时放弃了。1、升级vue-cli为最新4.5cnpminstall-gvue@vue/cli2、创建项目vuecreatedemo1选择Manuallyselectfeatures 选中这些组件 选择3.x选择：ESLint+Prettier&n... 查看详情
vue2不同版本下如何分环境打包(代码片段)
目录前言vue2版本（基于webpack）的动态ip及端口分环境打包1、在public目录下，新建static文件夹，在static文件夹下再新建config.js文件2、在config.js文件中编写对应的分别打包环境3、把config.js在index.html中引入4、创建对... 查看详情
vue项目分环境打包的实现步骤(代码片段)
...目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个，之前每次要发布测试版或Pre版都是修改了源码中API地址后打包，这样很麻烦。如果能根据不同环境打包就完美了。网上搜集了许多资料，现在可以... 查看详情
vue打包并自动部署到指定服务器
...建.env.production文件，并添加环境变量VUE_APP_SERVER_ID=1创建自动化部署脚本在package.json同级目录下创建文件夹deploy在deploy文件下创建config.js和servers.js和index.jsservers.js：配置服务器相关信息config.js：发布前的一些处理index.js：发布到... 查看详情
vue2不同版本下如何分环境打包(代码片段)
目录前言vue2版本（基于webpack）的动态ip及端口分环境打包1、在public目录下，新建static文件夹，在static文件夹下再新建config.js文件2、在config.js文件中编写对应的分别打包环境3、把config.js在index.html中引入4、创建对... 查看详情
在azuredevopsserver(tfs)中实现vue项目的自动打包(代码片段)
...面展示和使用简单方面有很大的优势，逐渐被越来越多的前端开发团队使用。本文介绍基于AzureDevOpsServer，如何实现Vue框架前端代码的编译和打包。代理服务器配置AzureDevOpsServer的自动化流水线，都基于代理服务器AgentServer，需要... 查看详情
vue前端打包更新后客户端自动更新
...加了不缓存配置场景需求已经上线的项目要配合后端更新前端逻辑、修改某个功能。根据前面的说的客户新进 查看详情
vue打包区分生产和测试环境
...术Avue工程在实际应用的打包过程中往往需要根据不同的环境打上不同的包，这个时候默认的模式便不能够满足使用了，参考vue-cli模式我们可以在工程中加入如下配置笔者在使用中因为文档没摸清楚，走了点弯路。因为VUE默认的... 查看详情
antdesign项目打包后报错："menu(orflex)isnotdefined"(代码片段)
我的项目使用了ant-design和ant-design-mobile，在测试环境上没问题，但是打包发布之后控制台报错MenuisnotdefinedFlexisnotdefined经过一番查找，终于发现问题的原因：我在代码中使用Menu和Flex组件的方式是这样的：<Menu.Item>xxxx</Menu.I... 查看详情
python自动化自动化测试平台开发：8.前端开发实战上之环境搭建(代码片段)
1.安装vue-clivue-cli是vue的脚手架框架，我们如果要使用vue需要准备大量的环境和配置文件，非常的繁琐。而vue-cli就是用来简化这些繁琐的步骤的。使用vue-cli会自动帮我们搭建好一套vue的环境。我们只需要在它的框架下ÿ... 查看详情
使用vite和typescript带你从零打造一个属于自己的vue3组件库
...涌现出了许多的UI组件库。例如我们熟知的ElementUI,Vant，AntDesign等等。但是作为一个前端开发者，你知道一个UI组件库是如何被打造出来的吗?读完这篇文章你将学会:如何使用pnpm搭建出一个Monorepo环境如何使用vite搭建一个基本的Vue... 查看详情
前端本地打包命令和安装配置时的配置有关吗?
您好，前端本地打包命令和安装配置是有关的。首先，您需要安装Node.js，它是一个JavaScript运行环境，可以用来运行前端代码。安装完成后，您可以使用npm命令来安装前端开发工具，如Webpack，Babel等。安装完成后，您可以使用Webp... 查看详情
vue环境搭建
目前我们的项目前端都采用的是vuejs为了方便开发过程中前后端同事进行功能对接，建议每个同事都准备好前后端环境（前端的同事参考文档第二部分，后端同事请参考第一部分），只要保持前后端代码是最新的就可以在自己本... 查看详情
docker部署前端和后端打包程序
...ocker启动命令：nginx.conf修改为：程序更新：每次只需要把前端vue打包程序更新到/data2/geovis/docker_nginx/nginx_share_dir下即可。Dockerfile文件内容：start.sh内容(最后一个jar包不能后台运行，否则容器会自动退出)：构建docker镜像启动geovis-... 查看详情
antdesignvue
antdesignvue官网：https://www.antdv.com/components/cascader-cn/antdesign在项目中的使用分为三步骤：下载/引入/使用/https://www.antdv.com/docs/vue/introduce-cn/ 我们推荐使用npm或yarn的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产... 查看详情
vue开发系列vue开发环境搭建
概要目前前端开发技术越来越像后台开发了，有一站式的解决方案。1.JS包的依赖管理像MAVEN。2.JS代码编译打包。3.组件式的开发。vue是一个前端的一站式的前端解决方案，从项目的初始化，组件的开发，项目编译都提供了完... 查看详情
springboot+antdesign+vue办公自动化oa管理系统框架
项目介绍一款Java语言基于SpringBoot2.x、MybatisPlus、Vue、AntDesign、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统&#... 查看详情