详解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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
vue+animation实现翻页动画
Jun 29 Javascript
js实现验证码干扰(动态)
Feb 23 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
php递归方法实现无限分类实例代码
2014/02/28 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python opencv实现图片旋转矩形分割
2018/07/26 Python
python如何实现数据的线性拟合
2019/07/19 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
银行求职信个人范文
2013/12/16 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
矿泉水广告词
2014/03/20 职场文书
保证书范文大全
2014/04/28 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
导游词之介休绵山
2019/12/31 职场文书