前端自动分环境打包(vue和ant design)
现实中的问题:有时候版本上线的时候,打包时忘记切换环境,将测试包推上正式服务器,那你就会被批了。
期望:在写打包的命令行的时候就觉得自己在打包正式版本,避免推包时候的,不确信自己的包是否正确。
既然有了期望,那么就要开始百度如何去实现呢。
下面先开始介绍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);
以上就介绍完自动分环境打包
前端自动分环境打包(vue和ant design)的更多相关文章
- 基于Vue + webpack + Vue-cli 实现分环境打包项目
需求由来:我公司项目上线发布至服务器分为三个环境分别为测试环境.预发布环境.生产环境:前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的,因为我公司的项目比较大由许许 ...
- vue分环境打包配置不同命令
1.安装cross-env (cross-env能跨平台地设置及使用环境变量)cnpm/npm i cross-env -D 2.新建模板 红色的为相关文件 3.配置各个文件 (1)config下 ...
- VUE 如何分环境打包(开发/测试/生产)配置
前言 之前小玲一直处于更新,迭代项目的状态,开发环境.测试环境.生产环境都是前辈配置好的,自己几乎没有配置过,这次做几个新项目时,面临着上线,需要分环境打包配置,于是在网上遨游了一会会,摸索着按照网上 ...
- Vue项目分环境打包的实现步骤
转:https://blog.csdn.net/xinzi11243094/article/details/80521878 方法一:亲测真的有效 在项目开发中,我们的项目一般分为开发版.测试版.Pr ...
- springboot分环境打包(maven动态选择环境)
分环境打包核心点:spring.profiles.active pom.xml中添加: <profiles> <profile> <id>dev</id> ...
- 使用Maven分环境打包:dev sit uat prod
使用Maven管理的项目,经常需要根据不同的环境打不同的包,因为环境不同,所需要的配置文件不同,比如database的连接信息,相关属性等等. 在Maven中,我们可以通过P参数和profiles元素 ...
- vue3.0+vite+ts项目搭建-分环境打包(四)
分环境打包配置 新建.env.dev(或者.env) VITE_NODE_ENV = 'dev' VITE_HOST = 'http://local.host.com' 执行yarn dev ,控制台 ...
- 使用Vue+Django+Ant Design做一个留言评论模块
使用Vue+Django+Ant Design做一个留言评论模块 1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下 ...
- spring-boot分环境打包为tar包
1.pom配置 <!-- 多环境打包 start --> <profiles> <!-- 开发环境配置 --> <profile> <id> ...
随机推荐
- WKWebView 的使用和封装
WKWebView 的使用和封装 前言 项目中有个新闻资讯模块展示公司和相关行业的最新动态. 这个部分基本是以展示网页为主,内部可能会有一些 native 和 JS 代码的交互. 因为是新项目,所以决 ...
- 【spring源码】bean的实例化(转载)
首先来看一段代码,看过上一节的朋友肯定对这段代码并不陌生.这一段代码诠释了Spring加载bean的完整过程,包括读取配置文件,扫描包,加载类,实例化bean,注入bean属性依赖. 上一节介绍了Sp ...
- iis 重启命令
打开IIS配置窗口的CMD命令:开始---运行---CMD----输入inetmgr 直接使用CMD我们可以操作很多事情,比如启动IIS,重启IIS,停止IIS 重启IIS服务器,开始->运行 ...
- 4.SVM
- 2、开始学习C++
1.创建C++程序 C++程序是严格区分大小写,Cout与COUT都是识别不出来的,下面给出了一段简单的C++程序. #include "stdafx.h" #include &l ...
- 洛谷 P4093 [HEOI2016/TJOI2016]序列(Cdq+dp)
题面 luogu 题解 \(Cdq分治+dp\) \(mx[i],mn[i]\)分别表示第\(i\)位最大,最小能取到多少 那么有 \(j < i\) \(mx[j] \le a[i]\) \( ...
- 113th LeetCode Weekly Contest Flip Equivalent Binary Trees
For a binary tree T, we can define a flip operation as follows: choose any node, and swap the left a ...
- MySQL 重设root密码
Mysql 5.6.15版本的windows下的重设root密码,找了n个帖子终于弄明白了. 1. 开一个cmd窗口,进入Mysql的安装目录的bin文件夹,然后运行这个: mysqld --skip ...
- iptables 深入分析
四表五链四表:filter , nat, manager, raw五链: 五个HOOK点的链接,pre_rout, foward, post_rout, in ,out 问题:内核如何匹配,内核使能 ...
- tomcat普通用户启动不了
Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these enviro ...