详解vue 不同环境配置不同的打包命令


Posted in Javascript onApril 07, 2019

最近做的一个项目是配置了三个环境的:正式环境、测试环境和开发环境,下面以这个为例

第一步:安装cross-env

npm i --save-dev cross-env

或者在

package.json中加上"cross-env": "^5.0.1"进行安装依赖

package.json:

详解vue 不同环境配置不同的打包命令

//这是我项目的目录

详解vue 不同环境配置不同的打包命令

第二步:修改各环境下的参数

在config/目录下添加test.env.js、develop.env.js。并且修改文件里的内容

config/prod.env.js

详解vue 不同环境配置不同的打包命令

config/develop.env.js

详解vue 不同环境配置不同的打包命令

第三步:更改build文件夹的东西

1.给build文件夹下增加环境文件 webpack.develop.conf.js

详解vue 不同环境配置不同的打包命令

2.修改build.js

默认打包都是prod环境,我这里改成了默认是测试环境

打印是什么环境

详解vue 不同环境配置不同的打包命令

3.修改webpack.prod.conf.js

详解vue 不同环境配置不同的打包命令

4.修改webpack.base.conf.js

由于config/index.js配置不同的环境,静态文件取得是不同的目录,所以这边要根据不同的环境取出不同的配置,如果配置一样,那就无需区分了

详解vue 不同环境配置不同的打包命令

config/index.js

config/index.js dev运行

详解vue 不同环境配置不同的打包命令

config/index.js 开发环境配置

详解vue 不同环境配置不同的打包命令

config/index.js 测试环境配置

详解vue 不同环境配置不同的打包命令

config/index.js 正式环境配置

详解vue 不同环境配置不同的打包命令

第四步: 输入不同的命令打包环境

"build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",

"build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",

"build--develop": "cross-env NODE_ENV=develop env_config=develop node build/build.js"

测试环境打包: npm run build--test

正式环境打包: npm run build--prod

开发环境打包: npm run build--develop

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
JavaScript数组去重的几种方法
Apr 07 #Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 #Javascript
js中Generator函数的深入讲解
Apr 07 #Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 #Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 #Javascript
vue自定义指令directive的使用方法
Apr 07 #Javascript
浅谈express.js框架中间件(middleware)
Apr 07 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python探索之ModelForm代码详解
2017/10/26 Python
浅谈Python中的私有变量
2018/02/28 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python模块 _winreg操作注册表
2020/02/05 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
党员干部一句话承诺
2014/05/30 职场文书
反腐倡廉标语
2014/06/24 职场文书
公司员工活动策划方案
2014/08/20 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android