详解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 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 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
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python动态进度条的实现代码
2019/07/03 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python通过socketserver处理多个链接
2020/03/18 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python几种常见算法汇总
2020/06/02 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
十八大感想感言
2014/02/10 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers