详解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提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
JS代码优化的8点建议
Feb 04 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
原生js实现分页效果
Sep 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
php之字符串变相相减的代码
2007/03/19 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
在Python中使用HTML模版的教程
2015/04/29 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python获取任意xml节点值的方法
2015/05/05 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python3+PyQt5实现柱状图
2018/04/24 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
基于Python中的yield表达式介绍
2019/11/19 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
翻译学院毕业生自荐书
2014/02/02 职场文书
高三学生评语大全
2014/04/25 职场文书
关于教师节的广播稿
2014/09/10 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
学校运动会开幕词
2016/03/03 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
Python字符串的转义字符
2022/04/07 Python