详解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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
vue设置全局访问接口API地址操作
Aug 14 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP array_push 数组函数
2009/12/26 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
mouse_on_title.js
2006/08/25 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
详谈javascript异步编程
2016/02/21 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Vue.js仿Select下拉框效果
2020/02/18 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
python解析html开发库pyquery使用方法
2014/02/07 Python
Python中文竖排显示的方法
2015/07/28 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python 录制系统声音的示例
2020/12/21 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
2014年小学校长工作总结
2014/12/08 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android