详解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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
javascript 对象的定义方法
Jan 10 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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程序的运行流程
2016/06/23 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
今天,小程序正式支持 SVG
2019/04/20 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
django框架cookie和session用法实例详解
2019/12/10 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
高三体育教学反思
2014/01/29 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
昆虫记读书笔记
2015/06/26 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python