Vue 项目分环境打包的方法示例


Posted in Javascript onAugust 03, 2018

我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用

1、package.json

在build下面添加一个test运行命令

"test": "node build/build.js"

Vue 项目分环境打包的方法示例

2、prod.env.js

在config -> prod.env.js 中修改代码

'use strict'
 // 读取系统运行时候的变量
 const target = process.env.npm_lifecycle_event;
 // 控制台日志输出
 console.log('env is deploying, current env is', target)
 // 判断环境变量,是test,还是build
 if (target == 'test') {
  var obj = {
   NODE_ENV: '"production"',
   API_ROOT: '"此处替换为测试环境地址"',
  }
 } else {
  var obj = {
   NODE_ENV: '"production"',
   API_ROOT: '"此处替换为测试环境地址"',
  }
 }
  
 module.exports = obj;

3.测试环境:

$ npm run test

正式环境:

```
$ npm run build
```

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
如何在vue里添加好看的lottie动画
Aug 02 #Javascript
原生js实现form表单序列化的方法
Aug 02 #Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 #Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 #Javascript
vue组件挂载到全局方法的示例代码
Aug 02 #Javascript
原生js封装的ajax方法示例
Aug 02 #Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 #Javascript
You might like
PHP中其实也可以用方法链
2011/11/10 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php二维数组转成字符串示例
2014/02/17 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
js模块加载方式浅析
2017/08/12 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Python实现的归并排序算法示例
2017/11/21 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
打架检讨书100字
2014/01/19 职场文书
计算机学生求职信范文
2014/01/30 职场文书
药店促销活动总结
2014/07/10 职场文书
档案接收函格式
2015/01/30 职场文书
2016年父亲节寄语
2015/12/04 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技
Spring Boot实现文件上传下载
2022/08/14 Java/Android